外观
动画
约 382 字大约 1 分钟
2024-10-02
实现多个状态间的变化过程, 动画过程可控(重复播放, 最终画面, 是否暂停).
例子:
HTML
<img src="assets/304ba504f27b147a71e00dd072a6be3dbb43138e.gif" alt="img">CSS
img{
width: 300px;
height: 300px;
animation: test 1s infinite alternate;
}
@keyframes test {
0% {
transform: translate(0);
}
100% {
transform: translate(400px);
}
}使用
定义动画
有两种定义方式, 第一张只能设置2个状态, 第二种可以设置多个.
@keyframes 动画名称 {
from {}
to {}
}@keyframes 动画名称 {
0% {}
10% {}
......
100% {}
}使用动画
动画名称
animation-name: 动画名称
动画耗时
animation-duration: 动画耗时(s)
速度曲线
animation-timing-function
属性值:
lincear: 匀速.
steps(数值): 分步动画, 通常配合精灵图实现精灵动画.
延时时间
animation-delay: 数值(s)
重复次数
animation-iteration-count
属性值:
数值: 直接重复几次.
infinite: 无限循环.
动画方向
animation-direction
属性值:
alternate: 反向.
执行完毕状态
animation-fill-mode
属性值:
forwards: 结束时状态.
backwards: 开始时状态(默认).
暂停动画
animation-play-state
属性值:
paused: 暂停, 通常配合:hover使用.
复合
animation: 动画名称 动画耗时 速度曲线 延时时间 重复次数 动画方向 执行完毕状态
提示:
- 动画名称和动画耗时为必须.
- 取值不分先后顺序.
- 如果有两个时间值, 第一个时间表动画耗时, 第二个时间表示延时时间.
- 属性值与独立属性一致.
版权所有
版权归属:Erhai_lake