动画 animation

制作动画分为两步：

1. 在css中定义动画函数
2. 给目标元素调用动画函数

动画序列：

• 0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列。
• 在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
• 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
• 请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

1. 动画名
   设置要使用的动画名 animation-name:xxx;
2. 持续时间
   设置动画播放的持续时间 animation-duration:3s
3. 速度曲线
   和设置过渡的速度曲线一样 animation-timing-function:linear;

• linear： 匀速 （linear：线性的）
• ease： 慢-快-慢 默认值 （ease：减缓，这里理解为变化，速度是变化的）
• ease-in： 慢-快。 （ease-in：in，在…里面，进入）
• ease-out： 快-慢。（ease-out：out，在…外边，外部，离去）
• ease-in-out： 慢-快-慢。

1. 延迟时间
   animation-delay: 0s;
2. 循环次数
   设置动画播放的循环次数 animation-iteration-count: 2;
   可以指定数字，也可以指定 infinite ，infinite为无限循环
   interation：反复，循环
3. 循环方向
   animation-direction：direction：方向
   如在动画中定义了 0%：红色 100%：黑色 那么 当属性值为
   1. normal 默认值 红 -> 黑
   2. reverse 反向运行 黑 -> 红 （reverse：反向，逆向播放）
   3. alternate 正-反-正… 红 -> 黑 -> 红… （alternate：交替，轮流）
   4. alternate-reverse 反-正-反… 黑 -> 红 -> 黑 …
   5. 以上与循环次数有关 （如果是交替，那么循环次数最少为2，才能来回交替一次）
4. 动画等待或者结束的状态
   animation-fill-mode 设置动画在等待或者结束的时候的状态 。
   动画结束之后默认是回到初始状态：backwards。
   • forwards：动画结束后，元素样式停留在 100% 的样式 （forwards：向前）
   • backwards： 在延迟等待的时间内，元素样式停留在 0% 的样式 （backwards：向后）
   • both： 同时设置了 forwards和backwards两个属性值
     理解：fill：装满，理解为填充。动画结束之后填充为什么状态，以什么状态停留
     forwards，停留在100%，那就是向前不回头
     backwards，停留在0%，动画执行完成是在100%，又回到0%初始位置，那就是向后回头了。
5. 暂停和播放
   animation-play-state 控制 播放 还是 暂停 （animation-play-state：动画播放状态）
   running 播放 paused 暂停

复合写法

animation：动画名称 持续时间 运动曲线  何时开始  播放次数  是否反方向  动画起始或者结束的状态;
animation: name duration timing-function delay iteration-count direction fill-mode;

• 前边两个属性必须要写，后边的可以省略
• 简写属性里面不包含 animation-play-state
• 暂停动画：animation-play-state: puased; 经常和鼠标经过等其他配合使用
• 想要动画走回来 ，而不是直接跳回来：animation-direction ： alternate
• 盒子动画结束后，停在结束位置： animation-fill-mode ： forwards

多个动画用逗号隔开.

动画结束事件animationend

• 元素在动画结束之后，会自动触发的事件 animationend

 var div = document.querySelector("div");
    div.addEventListener("animationend", function () {
      console.log("div的动画结束之后，触发");
    })