css动画 animation 关键帧 @keyframes

动画

定义动画

• @keyframes 动画名称 {
  form{} 初始状态，如果和盒子状态相同可省略 form{} === 0%{}
  结束状态to{} ===100%{}
  }

@keyframes move {
      0% {
        transform: translate(0);
      }

      100% {
        transform: translate(1000px);
      }

    }

调用动画

• animation:动画名称 动画持续时间 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态

  • 速度曲线：linear 匀速 补间动画
  • 速度曲线：steps(数值) 逐帧动画
  • 重复次数：infinite 无限播放
  • 动画方向：alternate 交替播放
  • 执行完毕时状态：forwards 停止在结束状态，不能和infinite结合使用，否则失效

• animation-name:动画名称，必须

• animation-duration:动画时长，必须

• animation-timing-function:速率曲线： linear匀速

• animation-interation-count:动画次数，infinite