animation停留_css animation动画属性

首先，当接触到“动画”这个词汇的时候。想到的都有哪些内容？

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: 允许暂停和恢复动画