css 动画

• 实现步骤

1. 定义动画

• 2个状态

@keyframes 动画名称 {
  from {}
  to {}
}

• 多个状态

@keyframes 动画名称 {
  0% {}
  10% {}
  ......
  100% {}
}

百分比表示 动画时长的百分比

2. 使用动画
   animation: 动画名称 动画花费时长

复合属性

animation: 动画名称 动画花费时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态；

• 特性
  动画名称和时长必须赋值
  取值不分先后顺序
  两个时间值，第一个时间是动画时长，第二个是延迟时间
• 速度曲线
  linear(线性匀速动画)、 steps(分步动画，配合精灵图实现精灵动画)
• 重复次数
  infinite 无限循环
• 动画方向
  alternate 反向
• 完毕状态
  forwards 停留在结束状态
  backwards 停留在开始状态

属性拆分

1695952485683.jpg