帧动画
@Animation
| animation | transition |
|---|---|
| 多个元素共享 | 当前元素 |
| 多个状态 | 两个状态 |
| 常规、步进、时间轴 | 常规、步进 |
| 关键字、百分比 | 属性 |
@keyframes ani_name {
from {
/* 开始状态/第一个关键帧 */
}
to {
/* 结束状态/最后一个关键帧 */
}
}
@keyframes ani_name {
0% {
/* 开始状态/第一个关键帧 */
}
50% {
/* 中间状态/中间关键帧 */
}
100% {
/* 结束状态/最后一个关键帧 */
}
}
.可以使用复合属性语法；也可以使用单独属性语法
animation: name duration timing-function delay iteration-count direction fill-mode;
animation-name: animation-duration: animation-timing-function: animation-delay: animation-iteration-count: animation-direction: animation-fill-mode:
| 类别 | 说明 |
|---|---|
| name | 动画名称 |
| duration | 动画持续时间 - length of time that an animation takes to complete one cycle
单位秒 s 或毫秒 ms 必须是正值或0 - must be positive or zero 必须指定单位 - unit is required |
| timing-function | 动画方式；见下表 |
| delay | 动画延迟时间，必须是第2个时间参数
正值 positive value：推迟 负值 negative value：提前 |
| iteration-count | 动画播放次数
数值：默认1 infinite：无穷；重复播放 |
| direction | 动画方向
alternate： reverse：反向播放 alternate-reverse：先反向播放，再正向播放 |
| fill-mode | 动画开始和结束时如何应用状态/样式 - applies styles to its target before and after its execution
none：不指定任何样式；从元素初始状态开始，结束后返回初始状态；默认值 backwards：动画开始时，从第一个关键帧开始；如果有延迟，将始终保持在当前状态 forwards：动画结束时，保持在最后一个关键帧 - retain the computed values set by the last keyframe；特别适合多个有延迟的动画 both：从第一个关键帧开始，结束时保持在最后一个关键帧；不会返回初始状态 |
| animation-play-state | 动画状态 - whether an animation is running or paused
paused：暂停状态 - currently paused running：播放状态 - currently playing 可以通过 :hover 或 JavaScript 来控制动画的播放状态 |
| animation-timeline | 动画时间线 |
| 类别 | 说明 |
|---|---|
| ease | 默认。动画以低速开始，然后加快，在结束前变慢 |
| linear | 动画从头到尾的速度是相同的 |
| ease-in | 动画以低速开始 |
| ease-out | 动画以低速结束 |
| ease-in-out | 动画以低速开始和结束 |
| cubic-bezier(n,n,n,n) | 使用 cubic-bezier 函数定义过程 |
| steps() | 步进动画方式；见后续内容 |
.tmp {
width: 100px;
height: 100px;
background-color: #fff;/* 初始状态 */
}
.tmp:hover {
animation: --color 1s;
}
@keyframes --color {
from {
background-color: #f40;/* 开始状态 */
}
to {
background-color: #0a0;/* 结束状态 */
}
}
.tmp {
width: 100px;
height: 100px;
background-color: #fff;/* 初始状态 */
}
.tmp:hover {
animation: --color 1s forwards;/* forwards*/
}
@keyframes --color {
from {
background-color: #f40;/* 开始状态 */
}
to {
background-color: #0a0;/* 结束状态 */
}
}
.tmp {
width: 100px;
height: 100px;
background-color: #fff;/* 初始状态；也是开始状态 */
}
.tmp:hover {
animation: --color 1s;
}
@keyframes --color {
to {
background-color: #0a0;/* 结束状态 */
}
}
.tmp {
width: 100px;
height: 100px;
background-color: #fff;/* 初始状态；也是结束状态 */
}
.tmp:hover {
animation: --color 1s;
}
@keyframes --color {
from {
background-color: #f40;/* 开始状态 */
}
}
.tmp {
width: 100px;
height: 100px;
background-color: #fff;/* 初始状态 */
}
.tmp:hover {
animation: --color 1s backwards;
}
@keyframes --color {
from {
background-color: #f40;
}
to {
background-color: #0a0;
}
}
animation:
roll 2s ease,
zoom 2s 2s ease infinite alternate;
animation:
roll 2s ease infinite alternate,
zoom 2s 2s ease;