动画
视觉暂留原理
人类具有“视觉暂留”的特性，人的眼睛看到一幅画或一个物体后，在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 前面 |
网友评论