CSS 动画经验

前言

工作任务需要在页面上设计一个动画，所以想到了使用CSS的 animation属性。
刚开始想把动画分解出来定义几个动画 一个一个执行，遇到了问题，怎么把两个动画合在一起。再后来，发现属性 animation-delay 只有第一次的时候回延迟，之后又开始一遍一遍的重复动画。这不是我想要的。最终想到了，把动画合成一个，把每次动画的延迟和动效合在一起进行循环。完成效果。。

知识点

animation-name  规定需要绑定到选择器的 keyframe 名称。。
animation-duration  规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function   规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count   规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

想给一个CSS 定义两个动效 可以

animation-name ：action1 ， action2；

下面的其他属性类似。中间用逗号分开。

animation-delay 不能在动画每次执行时都起作用，只是延迟多少秒可以执行。。

遇到中间有间隔的情况 可以考虑将时间间隔和动画作为一个整体考虑。。。

animation-fill-mode 动画停止的位置

animation-fill-mode : none | forwards | backwards | both;
none    不改变默认行为。
forwards    当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards   在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both    向前和向后填充模式都被应用。