07-CSS3动画 | 易学教程

animation

animation-name（动画名称）

animation-name: keyfamename | none;  //检索或设置对象所应用的动画名称

animation-duration（动画持续时间）

animation-duration: time;    //检索或设置对象动画的持续时间

animation-timing-function （动画的过渡类型）

annimation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | …;　　//设置动画过渡类型

//       ease：平滑过渡。等同于贝塞尔曲线（0.0,0.0,1.0,1.0）默认值
//     linear：线性过渡。等同于贝塞尔曲线（0.25,0.1,0.25,1.0）
//    ease-in：由慢到快。等同于贝塞尔曲线（0.42,0,1.0,1.0）
//   ease-out：由快到慢。等同于贝塞尔曲线（0，0，0.58，1.0）
//ease-in-out：由慢到快再到慢。等同于贝塞尔曲线（0.42,0,0.58,1.0）

//step-start：等同于steps(1,start)
//step-end：等同于steps(1,end)

//steps(<integer> [, [start | end] ]?) 接收两个参数的步进函数
第一个参数：必须为正整数，指定函数的步数
第二个参数：取值可以是start或end，指定每一步的值发生变化的时间点（可选，默认值为end）

//cubic-bezier(<number>,<number>,<number>,<number>)  特定的贝塞尔曲线类型，4个值需在[0,1]之间。

animation-delay（动画的延迟）

animation-delay: time;    //检索或设置对象动画开始的延迟

animation-iteration-count（动画的循环）

animation-iteration-count: infinite | <number>;    //检索或设置对象动画的循环次数，默认是1，infinite是无限次循环。

animation-direction（动画运行方式）

animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;　　//设置对象动画 在 循环中 是否反方向运动//           normal：正常方向//          reverse：反方向运行//配合循环属性，效果显著//        alternate：动画先 正方运行，再反方向运行，并持续交替运行//alternate-reverse：动画先 反方向运行，再正方向运行，并持续交替运行

animation-fill-mode（动画初始状态）

animation-fill-mode: none | forwards | backwards | both | initial | inherit;  //规定动画不播放时，应用到的样式。（动画完成  或   动画有延迟未开始时）

//     none：默认值，不设置动画之外的状态。
// forwards：设置对象状态为动画结束时的状态。
//backwards：设置对象状态为动画开始的状态。
//     both：设置对象状态为动画结束或开始的状态。

animation-play-state（动画运行/停止）

animation-play-state: paused | running;  //指定动画运行或停止，默认值为running。

animation的简写

animation: name  duration  timing-function  delay  iteration-count  direction  fill-mode  play-state;  //第一个必须写name，其他顺序的其实不重要，不需要的值还可以不写。

@keyframes 关键帧

@keyframes  animationname{

keyframes-selector   { css-styles; }

keyframes-selector   { css-styles; }

……

}

//animationname  表示要控制的动画的名称。

//keyframes-selector  表示从0%到100%，0%可以用from代替，100%可以用to代替。

//css-styes  表示动画需要调整的样式。

例子如下：

@keyframes circle_inner{　　from { transform: rotateX(0deg); }　　25%  { transform: rotateX(45deg); }　　75%  { transform: rotateX(315deg); }　　to   { transform: rotateX(360deg); }}

will-change(将要做什么动画)

//提前通知浏览器元素将要做什么动画，让浏览器提前准备合适的优化方案。

will-change  :  auto | scroll-position | contents | <custom-ident> | <animateable-feature>;

//                 auto：此关键字没有特定的意图，适用于它通常所做的启发式和优化。
//      scroll-position：表示将要改变元素的滚动位置。
//             contents：表示将要改变元素的内容。

//       <custom-ident>：明确指定将要改变的属性与给定的名称。
//<animateable-feature>：可动画的一些特征值，如left、top、margin等。

来源：https://www.cnblogs.com/mingliangge/p/12207652.html

标签

动画

贝塞尔

animation