动画

动画

介绍：
动画( animation )是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，多控制，连续自动播放等效果。

一、动画的基本使用

1、我们先说一下制作动画的两个步骤：
（1）、先定义动画；
（2）、先使用（调用）动画。
2、用keyframes定义动画（类似定义类选择器）
写一下挺麻烦的扒个图吧…

3、下面我来说一下它的序列：
（1）、0% 是动画的开始，100%是动画的完成。这样的规则就是动画序列。
（2）、在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
（3）、动画是使元素从一种样式逐渐变化为另一种样式的效果。 我们可以改变任意多的样式任意多的次数。
（3）、请用百分比来规定变化发生的时间，或用关键词"from"和"to"，等同于0%和100%。
4、元素使用动画
先来看个图吧：

我们说一下它的序列：
（1）、0%是动画的开始，100%是动画的完成。这就是动画序列。
（2）、在@keyframes中规定项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果。
（3）、动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
（4）、请用百分比来规定变化发生的时间，或用关键词"from"和"to"，等同于0%和100%。
注意：
1、可以做多个状态的变化keyframe 关键帧。
2、里面的百分比要是整数。
3、里面的百分比就是总的时间的划分。

二、动画的常用元素

先说一下有哪些元素以及它们的作用
1、@keyframes
作用为：规定动画。
2、animation
作用为：所有动画属性的简写属性， 除了animation-play-state属性。
3、animation-name
作用为：规定@keyframes动画的名称。( 必须的)
4、animation-duration
作用为：规定动画完成一个周期所花费的秒或毫秒 ，默认是0。( 必须的)
5、animation-timing-function
作用为：规定动画的速度曲线，默认是"ease"。
6、animation-delay
作用为：规定动画何时开始，默认是0。
7、animation-iteration-count
作用为：规定动画被播放的次数，默认是1，还有infinite（无限）。
8、animation-direction
作用为：规定动画是否在下一周期逆向播放，默认是"normal “，“alternate"为逆播放
9、animation-play-state
作用为：规定动画是否正在运行或暂停。默认是"running”（不暂停） ，还有” paused"。（暂停）
10、animation-fill-mode
规定动画结束后状态，保持"forwards"回到起始"backwards"。

三、简写动画的属性

animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是反方向 动画起始或者结束的状态；
举个"栗子"：
animation: myfirst 5s linear 2s infinite alternate;
意思就是：名字，规定完成一周期为5秒，速度为匀速，规定何时开始，无限循环，规定动画逆播放。
注意：
（1）、简写属性里面不包含animation-play-state。
（2）、暂停动画：animation-play-state: puased; 经常和鼠标经过等其他配合使用。
（3）、想要动画走回来，而不是直接跳回来要这样写：animation-direction:alternate。
（4）、元素动画结后，停在结束位置是：animationfill-mode : forwards。
（5）、元素可以添加多个动画，但是要用逗号隔开。

四、说一下 animation-timing-function

animation-timing-function：规定动画的速度曲线，默认是"ease"。
说一下它的取值：
1、linear
动画从头到尾的速度是相同的。匀速
2、ease
它的默认值。动画以低速开始，然后加快，在结束前变慢。
3、ease-in
动画以低速开始。
4、ease-out
动画以低速结束。
5、ease-in-out
动画以低速开始和结束。
6、steps（）
指定了时间函数中的间隔数量，（）里面写步长。

[^1]：好了这就是关于动画的相关知识，希望对你有所帮助，最后让我们一起努力加油吧！