首先，当接触到“动画”这个词汇的时候。想到的都有哪些内容？
1.这个动画经历了多长时间
2.这个动画怎么动的？从上往下？还是从左往右？
3.这个动画动几次？无限次吗？
4.动画如果结束运动了，最后状态是什么？
好，就上面的问题。
1.这个动画经历了多长时间？
也就是animation里面使用的 animation-duration 就是动画完成一个周期的时长。
2.这个动画怎么动？
这个就涉及两个方面了，
2.1.首先怎么动可能涉及到动画速度。比如先快后慢？还是先慢后快？这个就是 animation-timing-function 的工作。
2.2.其次，这个动画在一次运动中的某一个状态，也就是每一个关键帧的状态。这个就是 animation-name 的工作。这里需要指定@keyframes(英文单词的名次叫：关键帧)来制定在某一个状态（关键帧）下的状态
3.这个动画会停下来吗？
这个就是animation-iteration-count 的工作，表示这里的迭代次数。可以指定次数，也可以设置为无穷大，那就完全停不下来
4.动画如果结束，最后的状态？
目前这个动画，如果有结束，最后停留的状态是什么样子的？是在出发之前的状态，还是停留在最后一刻呢？
这就是 animation-fill-mode 指定动画执行前后如何为目标元素应用样式
其他：
animation-delay ：设置延时
animation-direction ：设置动画在每次运动完成后是反方向运动，还是重新回到开始位置重复运动
animation-play-state: 允许暂停和恢复动画
网友评论