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的参数。