小动画制作时需要的知识点

动画：动画和过度类似，都是可以实现一些动态的效果。

不同的是，过渡需要在某个属性发生变化时才会触发。动画可以自动出发动态效果

 

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

@keyframes关键帧的意思➕名字（名字随便起）

动画的最低要求有两个部分

第一个from｛｝表示动画的开始位置，也可以使用0%表示

另外一个to｛｝表示动画的结束位置，也可以使用100%来表示

 

当我们设置动画时，一定要用animation-name

animation-name:  要对当前元素生效的关键帧的名字。

animation-duration:表示动画的执行时间

animation-delay:2s;表示动画的延时时间

animation-timing-function:linear;匀速

animation-timing-function:ease-in-out;先加速后减速。

 

animation-iteration-count:动画执行的次数。直接写一个次数就行。

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

可选值:

            次数（直接写几次就行）

            infinite（无限执行）

animation-iteration-count:infinite;无限执行次数。

animation-direction: normal（正常的）

 

animation-direction指定动画运行的方向

可选值

normal默认值  从from到to运行，每次都是这样。

reverse   从to到from运行，每次都是这样。

alternate从from向to运行重复执行动画时，反向执行

alternate-reverse 从to到from运行，重复执行动画时反向执行

可以去zeal查一下

 

animation-play-state:设置动画的执行状态

可选值

    running默认值，动画执行

    paused动画暂停

 

animation-fill-mode:动画的填充模式

可选值

none默认值，动画执行完毕，元素回到原来的位置

forwards动画执行完毕会停止在动画结束的位置。

backwards动画延时等待时，元素会处于开始位置

both结合了forwards和backwards