• 欢迎光临~

CSS笔记 - 10 动画

开发技术 开发技术 2022-10-12 次浏览

10. 动画

  • 动画和过渡类似,都可以实现一些动态效果。不同的是过渡需要在某个属性发生变化时才会触发,动画可以自动触发动态效果

  • 设置动画效果,需要先设置一个关键帧,关键帧设置了动画执行的每一个步骤

    @keyframes test {
        from {
            margin-left: 0;
        }
    
        to {
            margin-left: 900px;
        }
    }
    
  • 语法:

    • animation-name:指定动画的关键帧名称

    • animation-duration:指定动画效果的持续时间

    • animation-delay:动画效果的延迟,等待一段时间后再执行动画

    • animation-timing-function:动画的时序函数

    • animation-iteration-count:动画执行的次数

      • infinite 无限次执行
    • animation-direction 指定动画运行的方向

      • normal 从from向to运行,默认值
      • reverse 从to向from运行
      • alternate 从from向to运行,重复执行动画时反向执行
      • alternate-reverse 从to向from运行,重复执行动画时反向执行
    • animation-play-state 设置动画的执行状态

      • running 动画执行,默认值
      • paused 动画暂停
    • animation-fill-mode 动画的填充模式

      • none 动画执行完毕,元素回到原来位置
      • forwards 动画执行完毕,元素停止在动画结束的位置
      • backwards 动画延时等待时,元素就会处在开始位置
      • both 结合了forwards和backwards
程序员灯塔
转载请注明原文链接:CSS笔记 - 10 动画
喜欢 (0)