CSS 动画

transition 过渡是通过初始和结束两个状态之间的平滑过渡实现简单动画的； // animate.css 动画库？！

animation 则是通过设置多个节点（关键帧@keyframes）来精确控制一个或一组动画，来实现更为复杂的动画效果。

[ 实现方式 ] animation 制作动画效果需要两步，首先用关键帧@keyframes声明动画，再用 animation属性调用动画。

1. 定义动画
   @keyframes 动画名称{}  

2. 引用动画（动画属性）
   animation： <single-animation>[,<single-animation> ]*     // 所有动画属性的简写属性，除了animation-play-state属性
          
           即，动画名称  持续时间  运动曲线  延迟时间  播放次数  是否反方向
           // 关于几个值，除了动画名称、动画时间、延迟时间有严格顺序要求，其他的随意。
           一般情况下，主要使用前两个，即：animation:test 5s;

   // 和transition类似，animation也是一个复合属性，包括a8个子属性：

   <single-animation> = 
        <single-animation-name>：动画名称，规定@keyframes动画的名称，默认为none 
        || <single-animation-duration>：持续时间，规定动画完成一个周期所花的时间（秒或毫秒），默认为0
        || <single-animation-timing-function>：运动曲线，规定动画的速度曲线，默认为ease
        || <single-animation-delay>：延迟时间，规定动画何时开始，默认为0
        || <single-animation-iteration-count>：循环次数，即动画被播放的次数，默认为1
        || <single-animation-direction>：动画方向，规定动画是否在下一周期逆向播放，默认为normal
        || <single-animation-fill-mode>：播放状态，规定动画是否正在运行或暂停，默认为running
        || <single-animation-play-state>：填充模式，规定对象动画时间之外的状态，默认为none

     // 持续时间在前，延迟时间在后，若只存在一个时间，则是持续时间
     // IE9-不支持；safari4-8、IOS3.2-8.4、android2.1-4.4.4需要添加-webkit-前缀

1. 定义动画

@keyframes 动画名称{}

2. 引用动画（动画属性）

animation： <single-animation>[,<single-animation> ]* // 所有动画属性的简写属性，除了animation-play-state属性

即，动画名称持续时间运动曲线延迟时间播放次数是否反方向

// 关于几个值，除了动画名称、动画时间、延迟时间有严格顺序要求，其他的随意。

一般情况下，主要使用前两个，即：animation:test 5s;

// 和transition类似，animation也是一个复合属性，包括a8个子属性：

<single-animation> =

<single-animation-name>：动画名称，规定@keyframes动画的名称，默认为none

|| <single-animation-duration>：持续时间，规定动画完成一个周期所花的时间（秒或毫秒），默认为0

|| <single-animation-timing-function>：运动曲线，规定动画的速度曲线，默认为ease

|| <single-animation-delay>：延迟时间，规定动画何时开始，默认为0

|| <single-animation-iteration-count>：循环次数，即动画被播放的次数，默认为1

|| <single-animation-direction>：动画方向，规定动画是否在下一周期逆向播放，默认为normal

|| <single-animation-fill-mode>：播放状态，规定动画是否正在运行或暂停，默认为running

|| <single-animation-play-state>：填充模式，规定对象动画时间之外的状态，默认为none

// 持续时间在前，延迟时间在后，若只存在一个时间，则是持续时间

// IE9-不支持；safari4-8、IOS3.2-8.4、android2.1-4.4.4需要添加-webkit-前缀

// 代码示例 - 子属性写法

// 引用动画 div{ width: 300px; height: 100px; background-color: pink; animation-name: test; animation-duration: 3s; animation-timing-function: ease; animation-delay: 0s; animation-iteration-count: infinite; animation-direction: normal; animation-play-state: running; animation-fill-mode: none; } // 定义动画 @keyframes test{ from{background-color: lightblue;} to{background-color: black;} }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// 引用动画

div{
    width: 300px;
    height: 100px;
    background-color: pink;
    animation-name: test;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-play-state: running;
    animation-fill-mode: none;
}

// 定义动画

@keyframes test{
    from{background-color: lightblue;}
    to{background-color: black;}
}

// 代码示例 - 简写属性写法

div{ width: 100px; height: 100px; background-color: blue; animation:test 3s infinite,bgcol 3s infinite; // 多组动画，用逗号隔开；简写属性； } @keyframes test{ 0%{ // 开始位置，相当于 from transform:translate3d(0,0,0); } 25%{ transform:translate3d(600px,0,0); } 50%{ transform:translate3d(600px,300px,0); } 70%{ transform:translate3d(0,300px,0); } 100%{ // 结束位置，相当于 to transform:translate3d(0,0,0); } } @keyframes bgcol{ 25%{ background-color:red; } 50%{ background-color:green; } 70%{ background-color:yellow; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

div{
    width: 100px;
    height: 100px;
    background-color: blue;
    animation:test 3s infinite,bgcol 3s infinite;        // 多组动画，用逗号隔开；简写属性；
}
@keyframes test{
    0%{      // 开始位置，相当于 from
        transform:translate3d(0,0,0);
    }
    25%{
        transform:translate3d(600px,0,0);
    }
    50%{
        transform:translate3d(600px,300px,0);
   }
   70%{
        transform:translate3d(0,300px,0);
   }
   100%{     // 结束位置，相当于 to
       transform:translate3d(0,0,0);
   }
}
@keyframes bgcol{
    25%{
        background-color:red;
    }
    50%{
        background-color:green;
   }
   70%{
        background-color:yellow;
   }
}

定义动画 — 关键帧

关键帧的语法是以@keyframes开头，后面紧跟着动画名称animation-name。 ~~// animation API？↓~~

from等同于0%，to等同于100%。

百分比跟随的花括号里面的代码，代表此时对应的样式。

@keyframes animation-name{
    from | 0%{ }
    n%{ }
    to | 100%{ }
}

注意：
 1. 百分比顺序不一定非要从0%到100%排列，最终浏览器会自动按照0%-100%的顺序进行解析
 2. 如果存在负百分数或高于100%的百分数，则该关键帧将被忽略
 3. 如果0%或100%不指定关键帧，将使用该元素默认的属性值
 4. 若存在多个相同动画名称的@keyframes，浏览器只识别最后一个 “ @keyframes 动画名称” 里面的值
 5. 空的keyframes规则是有效的，它们会覆盖前面有效的关键帧规则

@keyframes animation-name{

from | 0%{ }

n%{ }

to | 100%{ }

}

注意：

1. 百分比顺序不一定非要从0%到100%排列，最终浏览器会自动按照0%-100%的顺序进行解析

2. 如果存在负百分数或高于100%的百分数，则该关键帧将被忽略

3. 如果0%或100%不指定关键帧，将使用该元素默认的属性值

4. 若存在多个相同动画名称的@keyframes，浏览器只识别最后一个 “ @keyframes 动画名称” 里面的值

5. 空的keyframes规则是有效的，它们会覆盖前面有效的关键帧规则

调用动画 — 动画属性

[ 动画名称 ] animation-name: none | <single-animation-name> [, <single-animation-name> ]*

<single-animation-name>: none | 自定义动画名称

1	<single-animation-name>: none \| 自定义动画名称

如果多个动画试图修改相同的属性，那么动画列表的后面覆盖前面

如果动画的其他7个子属性和动画名称的长度不同，动画名称列表的长度决定最终的长度。

多余的值无效，缺少的值按照顺序进行重复

div{ width: 300px; height: 100px; position: relative; background-color: pink; animation-name: test1,test2,test3; animation-duration: 3s,1s; animation-iteration-count: infinite; }

1
2
3
4
5
6
7
8
9

div{
    width: 300px;
    height: 100px;
    position: relative;
    background-color: pink;
    animation-name: test1,test2,test3;
    animation-duration: 3s,1s;
    animation-iteration-count: infinite;
}

[ 持续时间 ] animation-duration: <time> [, <time>]*

animation-duration: &lt;time&gt;[,&lt;time&gt;]*   / / 持续时间指完成动画的时间

1	animation-duration: <time>[,<time>]* / / 持续时间指完成动画的时间

0s（初始值）意味着动画没有时间，持续时间不能为负值。

animation-name: test1,test2; animation-duration: -1s,1s; // test1的持续时间设置为负值，将使得整个动画持续时间都失效，因此test2也将没有动画效果

1
2

animation-name: test1,test2;
animation-duration: -1s,1s; // test1的持续时间设置为负值，将使得整个动画持续时间都失效，因此test2也将没有动画效果

[ 运动曲线 ] animation-timing-function: <single-timing-function> [, <single-timing-function>]*

类似于transition的时间函数，可以应用于整个动画中，也可以应用于关键帧的某两个百分比之间。

div{ width: 300px; height: 100px; position: relative; background-color: pink; animation-name: test; animation-duration: 5s; animation-iteration-count: infinite; } @keyframes test{ 0%{left: 0px;animation-timing-function: ease;} 20%{left: 50px;animation-timing-function: linear;} 40%{left: 100px;animation-timing-function: ease-in;} 60%{left: 150px;animation-timing-function: ease-out;} 80%{left: 200px;animation-timing-function: step-start;} 100%{left: 250px;animation-timing-function: step-end;} }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

div{
    width: 300px;
    height: 100px;
    position: relative;
    background-color: pink;
    animation-name: test;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

@keyframes test{
    0%{left: 0px;animation-timing-function: ease;}
    20%{left: 50px;animation-timing-function: linear;}
    40%{left: 100px;animation-timing-function: ease-in;}
    60%{left: 150px;animation-timing-function: ease-out;}
    80%{left: 200px;animation-timing-function: step-start;}
    100%{left: 250px;animation-timing-function: step-end;}
}

[ 延迟时间 ] animation-delay: <single-animation-delay>[,<single-animation-delay> ]*

// 定义延迟多少时间后动画开始播放，初始值: 0s。
<single-animation-delay>= <time>[,<time>]*

注意：
 1. 该延迟时间是指整个动画的延迟时间，而不是每个循环的延迟时间，只在动画开始时进行一次时间延迟。
 2. 如果该值是负值，则表示动画的起始时间从0s变为延迟时间的绝对值。

// 定义延迟多少时间后动画开始播放，初始值: 0s。

<single-animation-delay>= <time>[,<time>]*

注意：

1. 该延迟时间是指整个动画的延迟时间，而不是每个循环的延迟时间，只在动画开始时进行一次时间延迟。

2. 如果该值是负值，则表示动画的起始时间从0s变为延迟时间的绝对值。

[ 循环次数 ] animation-iteration-count: infinite | <number>[,infinite | <number>]*

默认为1，可以是整数，也可以小数，但不能是0和负数；

如果为infinite则表示无限次动画；

[ 动画方向 ] animation-direction: <single-animation-direction>[,<single-animation-direction> ]*

// 规定动画是否在下一周期逆向播放
<single-animation-direction> = normal | reverse | alternate | alternate-reverse

  normal: 正向播放（默认）
  reverse: 反向播放
  alternate: 若动画只播放一次，则和正向播放一样。若播放两次以上，偶数次效果为反向播放
  alternate-reverse: 若动画只播放一次，则和反向播放一样。若播放两次以上，偶数次效果为正向播放

// safari浏览器不支持reverse属性和alternate-reverse属性

// 规定动画是否在下一周期逆向播放

<single-animation-direction> = normal | reverse | alternate | alternate-reverse

normal: 正向播放（默认）

reverse: 反向播放

alternate: 若动画只播放一次，则和正向播放一样。若播放两次以上，偶数次效果为反向播放

alternate-reverse: 若动画只播放一次，则和反向播放一样。若播放两次以上，偶数次效果为正向播放

// safari浏览器不支持reverse属性和alternate-reverse属性

[ 动画状态 ] animation-play-state:running | paused[,running | paused]*

running：（初始值）表示播放中；

paused：表示动画暂停；

[ 填充模式 ] animation-fill-mode: <single-animation-fill-mode>[,<single-animation-fill-mode> ]*

// 定义动画开始帧之前和结束帧之后的动作
<single-animation-fill-mode> = none | forwards | backwards | both

   none: 动画结束后，元素移动到初始状态 
         // 初始状态并不是指0%的元素状态，而是元素本身属性值
   forwards: 在动画播放完时，将强制保持在动画最后一帧，即动画结束的位置
             // 动画结束时的位置并不一定是100%定义的位置，因为动画有可能反向运动，也有可能动画的次数是小数
   backwards:在animation-delay的时间内，元素立刻移动到动画开始时的位置。若元素无animation-delay时，与none的效果相同。
             // 动画开始时的位置也不一定是0%定义的位置，因为动画有可能反向运动
             可以简单理解为：在动画未播放时（延迟时间内），强制移动到动画第一帧,即动画开始的位置
   both: 同时具有forwards和backwards的效果，即，向前和向后填充模式都被应用。

注意：
   1. android2.1-3不支持animation-fill-mode
   2. 当持续时间animation-duration为0s时，animation-fill-mode依然适用

// 定义动画开始帧之前和结束帧之后的动作

<single-animation-fill-mode> = none | forwards | backwards | both

none: 动画结束后，元素移动到初始状态

// 初始状态并不是指0%的元素状态，而是元素本身属性值

forwards: 在动画播放完时，将强制保持在动画最后一帧，即动画结束的位置

// 动画结束时的位置并不一定是100%定义的位置，因为动画有可能反向运动，也有可能动画的次数是小数

backwards:在animation-delay的时间内，元素立刻移动到动画开始时的位置。若元素无animation-delay时，与none的效果相同。

// 动画开始时的位置也不一定是0%定义的位置，因为动画有可能反向运动

可以简单理解为：在动画未播放时（延迟时间内），强制移动到动画第一帧,即动画开始的位置

both: 同时具有forwards和backwards的效果，即，向前和向后填充模式都被应用。

注意：

1. android2.1-3不支持animation-fill-mode

2. 当持续时间animation-duration为0s时，animation-fill-mode依然适用