CSS3笔记——动画 animation

概念

元素从一种样式逐渐变化另一种样式的效果。

兼容性

IE10+、FireFox16+、Chrome43+、Safari9+、Opera30+

@keyframes

创建动画，通过逐步改变从一个CSS样式设定到另一个。

在动画过程中，可以通过@keynames规则多次改变CSS样式。

语法：

@keyframes animationname {
keyframes-selector{
css-style
}
}

参数说明：

animationname:：animation的名称

keyframes-selector：动画持续百分比，0-100%。

也可以使用关键字form（0%）、to（100%）；还可以混合使用。

如下所示：

@keyframes 名称 {
from{css-style;}
to{css-style;}
}

@keyframes 名称 {
from{css-style;}
20% {css-style;}
to  {css-style;}
}

animation-name

检索或设置对象所应用的动画名称

语法：

animation-name: keyframename | none;

参数说明：

keyframename ： 指明要绑定的动画名称

none：指定没有动画（跟着父元素走）

animation-duration

检索或设置动画的持续时间

语法：

animation-duration: time;

参数说明：

time指定花费的时间，默认为0，意味着没有动画。

单位：

s（秒）

ms（毫秒）

animation-timing-function

检索或设置对象动画的过渡类型

语法：

animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out;

参数说明：

linear：线性过渡 匀速运动，突然停下

ease ：平滑过渡 慢-快-快（速度增加少）

ease-in： 由慢到快，然后突然就停下来了

ease-out：由快到慢，然后平稳地停下来

ease-in-out：慢-快-慢

animation-delay

不属于动画之内。

定义动画开始前的等待时间。

语法：

animation-delay: time;

单位：

s（秒）

ms（毫秒）

animation-iteration-count

检索或设置动画的循环次数。

语法：

animation-iteration-count: infinite | number;

参数说明：

number 数字，默认为1。

infinite 无限循环

animation-direction

检索或设置对象动画在循环中是否反向运动。

语法：

animation-direction: normal | reverse | alternate | alternate-reverse

参数说明：

normal：正常方向

reverse：反方向

alternate： 先正常再反向，持续交替

alternate-reverse ：先反向再正常，持续交替

补充：

alternate和alternate-reverse的实现，需要animation-iteration-count属性要设为循环

animation-fill-mode

设置动画不播放时，要应用的元素样式

语法：

animation-fill-mode: none | forwards | backwards

参数说明：

none 不设置 （默认）

forwords：设置为动画结束时的状态

backwards：设置为动画开始时的状态

animation-play-state

设置动画运行或停止

需要配合js，或hover使用

语法：

animation-play-state: paused | runing

参数说明：

paused 暂停

running 运行 （默认）

animation整合

语法：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

补充说明：

name和duration是必须的，所以会优先判断。

默认第一个时间，作为duration的参数。