深入理解CSS动画animation - 小火柴的蓝色理想

×

目录

[1]定义 [2]关键帧 [3]动画属性 [4]多值 [5]API

前面的话

　　transition过渡是通过初始和结束两个状态之间的平滑过渡实现简单动画的；而animation则是通过关键帧@keyframes来实现更为复杂的动画效果。本文将介绍关于animation动画的相关知识

 

定义

　　和transition类似，animation也是一个复合属性，包括animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-play-state、animation-fill-mode共8个子属性

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

animation-<span style="color: #000000;">name: 动画名称(默认值为none)
animation</span>-<span style="color: #000000;">duration: 持续时间(默认值为0)
animation</span>-timing-<span style="color: #000000;">function: 时间函数(默认值为ease)
animation</span>-<span style="color: #000000;">delay: 延迟时间(默认值为0)
animation</span>-iteration-<span style="color: #000000;">count: 循环次数(默认值为1)
animation</span>-<span style="color: #000000;">direction: 动画方向(默认值为normal)
animation</span>-play-<span style="color: #000000;">state: 播放状态(默认值为running)
animation</span>-fill-mode: 填充模式(默认值为none)

<span style="color: #800000;">div</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 300px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> pink</span>;<span style="color: #ff0000;">
    animation-name</span>:<span style="color: #0000ff;"> test</span>;<span style="color: #ff0000;">
    animation-duration</span>:<span style="color: #0000ff;"> 3s</span>;<span style="color: #ff0000;">
    animation-timing-function</span>:<span style="color: #0000ff;"> ease</span>;<span style="color: #ff0000;">
    animation-delay</span>:<span style="color: #0000ff;"> 0s</span>;<span style="color: #ff0000;">
    animation-iteration-count</span>:<span style="color: #0000ff;"> infinite</span>;<span style="color: #ff0000;">
    animation-direction</span>:<span style="color: #0000ff;"> normal</span>;<span style="color: #ff0000;">
    animation-play-state</span>:<span style="color: #0000ff;"> running</span>;<span style="color: #ff0000;">
    animation-fill-mode</span>:<span style="color: #0000ff;"> none</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 关于keyframes关键帧的内容稍后介绍     </span><span style="color: #008000;">*/</span><span style="color: #800000;">
@keyframes test</span>{<span style="color: #ff0000;">
    0%{background-color</span>:<span style="color: #0000ff;"> lightblue</span>;}<span style="color: #800000;">
    30%</span>{<span style="color: #ff0000;">background-color</span>:<span style="color: #0000ff;"> lightgreen</span>;}<span style="color: #800000;">
    60%</span>{<span style="color: #ff0000;">background-color</span>:<span style="color: #0000ff;"> lightgray</span>;}<span style="color: #800000;">
    100%</span>{<span style="color: #ff0000;">background-color</span>:<span style="color: #0000ff;"> black</span>;}<span style="color: #800000;">
}</span>

 

关键帧

　　animation制作动画效果需要两步，首先用关键帧声明动画，再用animation调用动画

　　关键帧的语法是以@keyframes开头，后面紧跟着动画名称animation-name。from等同于0%，to等同于100%。百分比跟随的花括号里面的代码，代表此时对应的样式

@keyframes animation-<span style="color: #000000;">name{
    </span><span style="color: #0000ff;">from</span> | <span style="color: #800080;">0</span>%<span style="color: #000000;">{}
    n</span>%<span style="color: #000000;">{}
    to </span>| <span style="color: #800080;">100</span>%<span style="color: #000000;">{}
}</span>

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

　　[注意]0%不可以省略百分号

<span style="color: #000000;">@keyframes test{
    </span><span style="color: #800080;">100</span>%{background-<span style="color: #000000;">color: black;}
    </span><span style="color: #800080;">60</span>%{background-<span style="color: #000000;">color: lightgray;}
    </span><span style="color: #800080;">30</span>%{background-<span style="color: #000000;">color: lightgreen;}
    </span><span style="color: #800080;">0</span>%{background-<span style="color: #000000;">color: lightblue;}
}</span>

<span style="color: #000000;">div{
    width: 300px;
    height: 100px;
    background</span>-<span style="color: #000000;">color: pink;
    animation</span>-<span style="color: #000000;">name: test;
    animation</span>-<span style="color: #000000;">duration: 3s;
    animation</span>-iteration-<span style="color: #000000;">count: infinite;
}</span>

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

<span style="color: #008000;">/*</span><span style="color: #008000;"> -20%和120%对应的代码无效</span><span style="color: #008000;">*/</span><span style="color: #000000;">
@keyframes test{
    </span>-<span style="color: #800080;">20</span>%{background-<span style="color: #000000;">color: red;}
    </span><span style="color: #800080;">0</span>%{background-<span style="color: #000000;">color: lightblue;}
    </span><span style="color: #800080;">30</span>%{background-<span style="color: #000000;">color: lightgreen;}
    </span><span style="color: #800080;">60</span>%{background-<span style="color: #000000;">color: lightgray;}
    </span><span style="color: #800080;">100</span>%{background-<span style="color: #000000;">color: black;}
    </span><span style="color: #800080;">120</span>%{background-<span style="color: #000000;">color: yellow;}
}</span>

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

<span style="color: #008000;">/*</span><span style="color: #008000;"> 0%和100%对应的颜色是默认值pink</span><span style="color: #008000;">*/</span><span style="color: #000000;">
@keyframes test{
    </span><span style="color: #800080;">30</span>%{background-<span style="color: #000000;">color: lightgreen;}
    </span><span style="color: #800080;">60</span>%{background-<span style="color: #000000;">color: lightgray;}
}</span>

【4】若存在多个@keyframes，浏览器只识别最后一个@keyframes里面的值 

<span style="color: #008000;">/*</span><span style="color: #008000;"> 后面覆盖前面 </span><span style="color: #008000;">*/</span><span style="color: #000000;">
@keyframes test{
    </span><span style="color: #800080;">0</span>%{background-<span style="color: #000000;">color: lightblue;}
    </span><span style="color: #800080;">30</span>%{background-<span style="color: #000000;">color: lightgreen;}
    </span><span style="color: #800080;">60</span>%{background-<span style="color: #000000;">color: lightgray;}
    </span><span style="color: #800080;">100</span>%{background-<span style="color: #000000;">color: black;}
}
@keyframes test{
    </span><span style="color: #800080;">0</span>%{background-<span style="color: #000000;">color: blue;}
    </span><span style="color: #800080;">30</span>%{background-<span style="color: #000000;">color: green;}
    </span><span style="color: #800080;">60</span>%{background-<span style="color: #000000;">color: gray;}
    </span><span style="color: #800080;">100</span>%{background-<span style="color: #000000;">color: black;}
}</span>

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

<span style="color: #008000;">/*</span><span style="color: #008000;"> 后面覆盖前面 </span><span style="color: #008000;">*/</span><span style="color: #000000;">
@keyframes test{
    </span><span style="color: #800080;">0</span>%{background-<span style="color: #000000;">color: lightblue;}
    </span><span style="color: #800080;">30</span>%{background-<span style="color: #000000;">color: lightgreen;}
    </span><span style="color: #800080;">60</span>%{background-<span style="color: #000000;">color: lightgray;}
    </span><span style="color: #800080;">100</span>%{background-<span style="color: #000000;">color: black;}
}
@keyframes test{
}</span>

 

动画属性

动画名称

animation-name

　　值: none | [, ]*

　　初始值: none

　　应用于: 所有元素

　　继承性: 无

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

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

<span style="color: #008000;">/*</span><span style="color: #008000;"> animation-name的顺序是test1,test2，且它们修改的是同样的属性，后面覆盖前面，所以test2有效，test1无效 </span><span style="color: #008000;">*/</span><span style="color: #000000;">
div{
    width: 300px;
    height: 100px;
    background</span>-<span style="color: #000000;">color: pink;
    animation</span>-<span style="color: #000000;">name: test1,test2;
    animation</span>-<span style="color: #000000;">duration: 3s;
    animation</span>-iteration-<span style="color: #000000;">count: infinite;
}
@keyframes test2{
    </span><span style="color: #800080;">0</span>%{background-<span style="color: #000000;">color: blue;}
    </span><span style="color: #800080;">30</span>%{background-<span style="color: #000000;">color: green;}
    </span><span style="color: #800080;">60</span>%{background-<span style="color: #000000;">color: gray;}
    </span><span style="color: #800080;">100</span>%{background-<span style="color: #000000;">color: black;}
}
@keyframes test1{
    </span><span style="color: #800080;">0</span>%{background-<span style="color: #000000;">color: lightblue;}
    </span><span style="color: #800080;">30</span>%{background-<span style="color: #000000;">color: lightgreen;}
    </span><span style="color: #800080;">60</span>%{background-<span style="color: #000000;">color: lightgray;}
    </span><span style="color: #800080;">100</span>%{background-<span style="color: #000000;">color: black;}
}</span>

【2】如果动画的其他7个子属性和动画名称的长度不同，动画名称列表的长度决定最终的长度，多余的值无余，缺少的值按照顺序进行重复

<span style="color: #000000;">div{
    width: 300px;
    height: 100px;
    position: relative;
    background</span>-<span style="color: #000000;">color: pink;
    animation</span>-<span style="color: #000000;">name: test1,test2,test3;
    animation</span>-<span style="color: #000000;">duration: 3s,1s;
    animation</span>-iteration-<span style="color: #000000;">count: infinite;
}
@keyframes test1{
    </span><span style="color: #800080;">0</span>%{background-<span style="color: #000000;">color: lightblue;}
    </span><span style="color: #800080;">30</span>%{background-<span style="color: #000000;">color: lightgreen;}
    </span><span style="color: #800080;">60</span>%{background-<span style="color: #000000;">color: lightgray;}
    </span><span style="color: #800080;">100</span>%{background-<span style="color: #000000;">color: black;}
}
@keyframes test2{
    </span><span style="color: #800080;">0</span>%{font-<span style="color: #000000;">size: 20px;}
    </span><span style="color: #800080;">30</span>%{font-<span style="color: #000000;">size: 30px;}
    </span><span style="color: #800080;">60</span>%{font-<span style="color: #000000;">size: 40px;}
    </span><span style="color: #800080;">100</span>%{font-<span style="color: #000000;">size: 50px;}
}
@keyframes test3{
    </span><span style="color: #800080;">0</span>%<span style="color: #000000;">{left: 0px;}
    </span><span style="color: #800080;">30</span>%<span style="color: #000000;">{left: 30px;}
    </span><span style="color: #800080;">60</span>%<span style="color: #000000;">{left: 40px;}
    </span><span style="color: #800080;">100</span>%<span style="color: #000000;">{left: 50px;}
}</span>

<div>测试文字</div>    

 

持续时间

　　持续时间指完成动画的时间

animation-duration

　　值: [, ]*

　　初始值: 0s

　　应用于: 所有元素

　　继承性: 无

animation-duration: <time>[,<time>]*</time></time>

　　0s意味着动画没有时间，持续时间不能为负值

animation-<span style="color: #000000;">name: test1,test2;
</span><!-- test1的持续时间设置为负值，将使得整个动画持续时间都失效，因此test2也将没有动画效果 --><span style="color: #000000;">
animation</span>-duration: -1s,1s;

 

时间函数

animation-timing-function

　　值: [, ]*

　　初始值: ease

　　应用于: 所有元素

　　继承性: 无

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

<span style="color: #000000;">div{
    width: 300px;
    height: 100px;
    position: relative;
    background</span>-<span style="color: #000000;">color: pink;
    animation</span>-<span style="color: #000000;">name: test;
    animation</span>-<span style="color: #000000;">duration: 5s;
    animation</span>-iteration-<span style="color: #000000;">count: infinite;
}

@keyframes test{
    </span><span style="color: #800080;">0</span>%{left: 0px;animation-timing-<span style="color: #000000;">function: ease;}
    </span><span style="color: #800080;">20</span>%{left: 50px;animation-timing-<span style="color: #000000;">function: linear;}
    </span><span style="color: #800080;">40</span>%{left: 100px;animation-timing-function: ease-<span style="color: #0000ff;">in</span><span style="color: #000000;">;}
    </span><span style="color: #800080;">60</span>%{left: 150px;animation-timing-function: ease-<span style="color: #0000ff;">out</span><span style="color: #000000;">;}
    </span><span style="color: #800080;">80</span>%{left: 200px;animation-timing-function: step-<span style="color: #000000;">start;}
    </span><span style="color: #800080;">100</span>%{left: 250px;animation-timing-function: step-<span style="color: #000000;">end;}
}</span>

 

循环次数

animation-iteration-count

　　值: infinite | [,infinite | ]*

　　初始值: 1

　　应用于: 所有元素

　　继承性: 无

　　默认为1，可以是整数也可以小数，但不能是0和负数。如果为infinite则表示无限次动画

 

动画方向

　　动画方向用来定义是否动画需要反向播放

animation-direction

　　值: [, ]*

　　初始值: normal

　　应用于: 所有元素

　　继承性: 无

<single-animation-direction> = normal | reverse | alternate | alternate-<span style="color: #000000;">reverse
normal: 正向播放
reverse: 反向播放
alternate: 若动画只播放一次，则和正向播放一样。若播放两次以上，偶数次效果为反向播放
alternate</span>-reverse: 若动画只播放一次，则和反向播放一样。若播放两次以上，偶数次效果为正向播放</single-animation-direction>

　　[注意]safari浏览器不支持reverse属性和alternate-reverse属性

 

动画状态

animation-play-state

　　值:running | paused[,running | paused]*

　　初始值: running

　　应用于: 所有元素

　　继承性: 无

　　running表示播放中，paused表示动画暂停

 

延迟时间

　　定义延迟多少时间后动画开始播放

animation-delay

　　值: [, ]*

　　初始值: 0s

　　应用于: 所有元素

　　继承性: 无

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

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

 

填充模式

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

　　[注意]android2.1-3不支持animation-fill-mode

animation-fill-mode

　　值: [, ]*

　　初始值: none

　　应用于: 所有元素

　　继承性: 无

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

<span style="color: #000000;">none: 动画结束后，元素移动到初始状态
    [注意]初始状态并不是指0</span>%<span style="color: #000000;">的元素状态，而是元素本身属性值
forwards: 元素停在动画结束时的位置
    [注意]动画结束时的位置并不一定是100</span>%<span style="color: #000000;">定义的位置，因为动画有可能反向运动，也有可能动画的次数是小数
backwards:在animation</span>-delay的时间内，元素立刻移动到动画开始时的位置。若元素无animation-<span style="color: #000000;">delay时，与none的效果相同
    [注意]动画开始时的位置也不一定是0</span>%<span style="color: #000000;">定义的位置，因为动画有可能反向运动。
both: 同时具有forwards和backwards的效果</span>

　　[注意]当持续时间animation-duration为0s时，animation-fill-mode依然适用，当animation-fill-mode的值为backwards时，动画填充在任何animation-delay的阶段。当animation-fill-mode的值为forwards时，动画将保留在100%的关键帧上

 

多值

animation

　　值: [, ]*

　　初始值: 无

　　应用于: 所有元素

　　继承性: 无

<single-animation> = <single-animation-name> || <single-animation-duration> || <single-animation-timing-function> || <single-animation-delay> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state></single-animation-play-state></single-animation-fill-mode></single-animation-direction></single-animation-iteration-count></single-animation-delay></single-animation-timing-function></single-animation-duration></single-animation-name></single-animation>

　　[注意]持续时间在前，延迟时间在后，若只存在一个时间，则是持续时间

<span style="color: #000000;">div{
    width: 300px;
    height: 100px;
    background</span>-<span style="color: #000000;">color: pink;
    animation: 1s test1,infinite test2 2s 1s;
}
@keyframes test1{
    </span><span style="color: #800080;">30</span>%{background-<span style="color: #000000;">color: red;}
    </span><span style="color: #800080;">60</span>%{background-<span style="color: #000000;">color: blue;}
    </span><span style="color: #800080;">100</span>%{background-<span style="color: #000000;">color: green;}
}
@keyframes test2{
    </span><span style="color: #800080;">100</span>%<span style="color: #000000;">{color: white;}
}</span>

 

API

　　animation涉及到的事件有animationstart、animationend、animationiteration三个。这三个事件的bubbles都是yes，cancelalbe都是no

　　 [注意]对于safari浏览器，animation的事件为webkitAnimationStart、webkitAnimationEnd、webkitAnimationIteration

　　[注意]动画事件只支持DOM2级事件处理程序的写法

animationstart

　　发生在动画开始时

　　【1】如果存在delay，且delay为正值，则元素等待延迟完毕后，再触发该事件

　　【2】如果delay为负值，则元素先将初始值变为delay的绝对值时，再触发该事件

    oSb.addEventListener(<span style="color: #800000;">'</span><span style="color: #800000;">animationstart</span><span style="color: #800000;">'</span><span style="color: #000000;">,function(){
        </span><span style="color: #0000ff;">this</span>.innerHTML = <span style="color: #800000;">'</span><span style="color: #800000;">动画开始</span><span style="color: #800000;">'</span><span style="color: #000000;">;
        </span><span style="color: #0000ff;">this</span>.style.background = <span style="color: #800000;">'</span><span style="color: #800000;">lightgreen</span><span style="color: #800000;">'</span><span style="color: #000000;">;
    },</span><span style="color: #0000ff;">false</span>);

 

animationend

　　发生在动画结束时

test.addEventListener(<span style="color: #800000;">'</span><span style="color: #800000;">animationend</span><span style="color: #800000;">'</span><span style="color: #000000;">,function(){
    </span><span style="color: #0000ff;">this</span>.style.background=<span style="color: #800000;">"</span><span style="color: #800000;">lightgreen</span><span style="color: #800000;">"</span><span style="color: #000000;">;
    </span><span style="color: #0000ff;">this</span>.innerHTML = <span style="color: #800000;">'</span><span style="color: #800000;">动画结束</span><span style="color: #800000;">'</span><span style="color: #000000;">;
},</span><span style="color: #0000ff;">false</span>);

 

animationiteration

　　发生在动画的一次循环结束时，只有当iteration-count循环次数大于1时，触发该事件

<span style="color: #0000ff;">var</span> i = <span style="color: #800080;">0</span><span style="color: #000000;">;
oSb.addEventListener(</span><span style="color: #800000;">'</span><span style="color: #800000;">animationiteration</span><span style="color: #800000;">'</span><span style="color: #000000;">,function(){
    i</span>++<span style="color: #000000;">;
    </span><span style="color: #0000ff;">this</span>.innerHTML =<span style="color: #000000;"> i;
},</span><span style="color: #0000ff;">false</span>);

【补充】

　　只有改变animation-name时，才会使animation动画效果重新触发

oSb.style.animationName = <span style="color: #800000;">'</span><span style="color: #800000;">none</span><span style="color: #800000;">'</span><span style="color: #000000;">;
setTimeout(function(){
    oSb.style.animationName </span>= <span style="color: #800000;">'</span><span style="color: #800000;">test</span><span style="color: #800000;">'</span><span style="color: #000000;">;
},</span><span style="color: #800080;">100</span>);