17 动画

动画

动画和过渡类似，都是可以实现一些动态的效果，不同的是

• 过渡需要在某个属性发生变化时才会触发
• 动画可以自动触发动态效果

设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤

@keyframes test {
    /* from表示动画的开始位置 也可以使用 0% */
    from{
        margin-left: 0;
        background-color: orange;
    } 

    /* to动画的结束位置 也可以使用100%*/
    to{
        background-color: red;
        margin-left: 700px;
    }

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

详情参考：https://www.bilibili.com/video/BV1XJ411X7Ud?p=117

实例就不演示了，需要用的时候看视频再次学习即可