动画

视觉暂留原理

人类具有“视觉暂留”的特性，人的眼睛看到一幅画或一个物体后，在0.34秒内不会消失

动画原理

通过把人物的表情、动作、变化等分解后画成许多动作瞬间的画幅，利用视觉暂留的原理，在一幅画还没消失前播放下一幅画，就会给人一种流畅的视觉变化效果

兼容性

手机设备的浏览器在使用CSS3动画时，要加上-webkit-前缀

CSS3 动画

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

动画属性 animation

animation-name 属性

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

语法

animation-name: keyframename | none

参数说明

keyframename：指定要绑定到选择器的关键帧的名称

noen：不规定动画

可以有多个值，每个值之间用“，”隔开

animation-duration 属性

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

语法

animation-duration: time

参数说明

time 指定动画播放完成花费的时间。默认值为 0，意味着没有动画效果

animation-timing-function 属性

该属性请参考此链接

animation-delay 属性

该属性请参考此链接

animation-iteration-count 属性

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

语法

animation-iteration-count: infinite | number

参数说明

• number 为数字，其默认值为1

• infinite 为无限次数循环

animation-direction 属性

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

语法

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

参数说明

参数	说明
normal	正常方向
reserve	反方向运行
alternate	动画先正常运行再反向运行，并持续交替运行
alternate-reserve	动画先反方向运行再正向运行，并持续交替运行

animation-fill-mode 属性

规定当动画不播放时（当动画完成或当动画有延迟未开始播放时），要应用到元素的样式

语法

animation-fill-mode: none | forwords | backwards | both | initial | inherit

参数说明

参数	说明
none	默认值。不设置对象动画之外的状态
forwards	设置对象状态为动画结束时的状态
backwards	设置对象状态为动画开始时的状态
both	设置对象状态为动画结束或开始的状态

animation-play-state 属性

指定动画是否正在运行或已暂停

语法

animation-paly-state：paused | running

参数说明

• paused：暂停动画

• running：默认值。正在运行的动画

animation 复合属性

检索或设置对象所应用的动画特效

语法

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

@keyframes

Keyframes 定义

关键帧。可以指定任何顺序排列来决定 Animation 动画变化的关键位置

使用说明

使用 @keyframes 规则创建动画，通过逐步改变从一个 CSS 样式设定到另一个

在动画过程中可以通过 @keyframes 规则多次更改 CSS 样式的设定

语法

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

参数说明

参数	说明
animationname	必写项。定义 animation 的名称
keyframes-selector	必写项。动画持续时间的百分比，0~100%、from(0%)、to(100%)
css-styles	必写项。一个或多个合法的 CSS 样式属性
前缀	可选。如果需要，加在@后面 keyframes 前面