跳到主要内容

动画

  • animation-name 指定动画的名字
  • animation-duration 一次动画执行的时间
  • animation-iteration-count 动画执行的次数
    • infinite 一直执行
  • animation-delay 动画的延时
  • animation-timing-function 时间函数
  • animation-direction 动画的方向
    • 可选值:
      • normal 默认值
      • reverse 动画反向执行
      • alternate 动画正向反向交替执行
      • alternate-reverse 和alternate相反
  • animation-fill-mode 动画的填充模式
    • 可选值:
      • none 默认值 延迟时元素保持不变,动画执行结束恢复原状
      • forwards 延迟时元素保持不变,动画执行结束保持to的状态
      • backwards 延迟时元素变为from状态,动画执行结束恢复原状
      • both 延迟时元素变为from状态,动画执行结束保持to的状态
  • animation-play-state 动画的播放状态
    • 可选值:
      • paused 暂停
      • running 播放
  • animation 简写属性可以同时设置所有动画相关的样式
  • 通过keyframeas来定义关键帧
    • from 表示动画的开始位置
    • to 表示动画的结束位置
    • 也可以使用百分比数值
  • 设置steps时,from第一下不算是第一步