- 实现步骤
- 定义动画
- 2个状态
@keyframes 动画名称 {
from {}
to {}
}
- 多个状态
@keyframes 动画名称 {
0% {}
10% {}
......
100% {}
}
百分比表示 动画时长的百分比
- 使用动画
animation: 动画名称 动画花费时长
复合属性
animation: 动画名称 动画花费时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;
- 特性
动画名称和时长必须赋值
取值不分先后顺序
两个时间值,第一个时间是动画时长,第二个是延迟时间 - 速度曲线
linear(线性匀速动画)、 steps(分步动画,配合精灵图实现精灵动画) - 重复次数
infinite 无限循环 - 动画方向
alternate 反向 - 完毕状态
forwards 停留在结束状态
backwards 停留在开始状态
属性拆分
1695952485683.jpg
网友评论