1. 什么是动画
在 CSS 中,可以使用@keyframes来定义动画
(keyframes 表示“关键帧”)
大致结构:
@keyframes rotation { /* rotation 动画名 */
from { /* 起始状态 */
transform: rotate(0);
}
to { /* 结束状态 */
transform: rotate(360deg);
}
}
2. 动画的调用
定义动画之后,可以使用 animation 属性调用动画。
animation基本属性:
- name: 动画的名字
(初始默认值 none) - duration: 动画时长
(初始默认值 0s) - timing function:变化速度曲线
(初始默认值 ease) - delay: 延迟时间(动画经过多少时间才开始)
(初始默认值 0s) - iteration-count: 动画执行次数
(初始默认值 1,如果想动画永远执行,写 infinite)
animation: name | duration | timing function | delay | iteration-count;
除此之外,还有一些属性:
animation-direction(设置是否轮流反向播放动画)
- normal: 以正常的方式播放动画(初始默认值)
- reverse: 以相反的方式播放动画
- alternate: 让动画的第 2、4、6…(偶数次)自动逆向执行
- alternate-reverse: 让动画的奇数次自动逆向执行
animation-fill-mode(设置当动画不播放时动画的状态)
- none: 不改变动画的默认行为
- forwards: 让动画停止在最后结束状态
- backwards: 在 animation-delay 所指定的时间段内,应用动画第一个关键帧中的样式
- both: 同时遵循 forwards 和 backwards 的规则
animation-play-state(设置动画是播放还是暂停)
- paused: 暂停动画的播放
- running: 正常播放动画
3. 多关键帧动画
对于想要实现多种效果的动画,这个时候就可以使用多关键帧。
大致结构:
@keyframes changeColor {
0% {
background-color: red;
}
20% {
background-color: orange;
}
40% {
background-color: blue;
}
100% {
background-color: green;
}
}