时间：2021-07-01 10:21:17 帮助过：10人阅读
在CSS3中可以通过animation创建复杂的动画序列，像transition属性一样用来控制CSS的属性实现动画效果。
animation实现动画效果主要由两个部分组成。
在CSS3中，把@keyframes称为关键帧。
@keyframes的语法规则：命名是由@keyframes开头，后面紧跟着动画的名称(animation-name)，再加上一对花括号"{...}"，括号中是多个不同时间段的样式规则。一个@keyframes中的样式规则是由多个百分比构成的，每个百分比样式规则可以设置不同的样式属性。可以使用关键词“from”，“to”代表一个动画的开始与结束，“from”相当于0%，"to"相当于100%。
@keyframes yxz { 0% { margin-left: 100px; background: green; } 40% { margin-left: 150px; background: orange; } 60% { margin-left: 75px; background: blue; } 100% { margin-left: 100px; background: red; }} 这里我们定义了一个叫“yxz”的动画，他的动画是从0%开始到100%时结束，从中还经历了一个40%和60%两个过程，上面代码具体意思是：“yxz”动画在0%时元素定位到left为100px的位置背景色为green，然后40%时元素过渡到left为150px的位置并且背景色为orange，60%时元素过渡到left为75px的位置,背景色为blue，最后100%结束动画的位置元素又回到起点left为100px处,背景色变成red。假设置我们只给这个动画有10s的执行时间，那么他每一段执行的状态如下图所示：
在@keyframes中的关键帧并不是一定要按照顺序来指定，其实可以任何顺序来指定关键帧，因为动画中的关键帧顺序由百分比值确定而不是声明的顺序。
@keyframes yxz{ 0%,40%{ width:200px; height:200px; } 20%,60%,80%{ width:100px; height:100px; } 100%{ width:0; height:0; }} 在这个例子中，0%，40%应用了相同的样式，20%，60%，80%也应用了相同的样式，100%时又是另外的样式。
这两个动画，因为他们并没有附加到任何元素上，是没有效果的。通过声明@keyframes动画后，要让动画生效，需要通过CSS属性来调用@keyframes声明的动画。
使用动画属性animation调用@keyframes声明的动画。 动画属性animation，是一个复合属性，它包含了八个子属性。其语法如下：
animation:[ || || || || || || || ] *
animation-name：主要用来指定一个关键帧动画的名字，这个名字要与@keyframes声明的名称一样。css加载动画时会应用对应的名字来执行。
animation-name:none | IDENT [,none | IDENT] *
IDENT：是由@keyframes创建的动画名称。
none：默认值，当值为none时，没有任何动画效果，可以用来覆盖动画。
animation-duration：主要用来设置动画播放所需要的时间，单位以s(秒)或ms(毫秒),默认值为0。
animation-duration:
animation-timing-function：主要用来设置动画的播放快慢方式。
与transition-timing-function类似，可点击查看。
animation-delay：主要用来设置动画延迟时间。
animation-duration:
当time为正整数时为延迟时间，负整数时会截断播放时间(把animation-duration所用的时间截断一部分，就是说跳过这部分值，直接进行后面的动画)
animation-iteration-count：主要用来设置动画播放的次数。
animation-iteration-count: infinite |[,infinite | ] *
通常为整数，也可以使用浮点数。默认值为1。如果取值为infinite，动画会无限播放。
animation-direction：主要用来设置动画播放的方向。
animation-direction:normal | alternate [,normal | alternate] *
默认值为normal，动画每次循环都是向前播放。alternate，动画向前播放一次，向后播放一次。
animation-play-state：主要用来控制动画播放的状态。
animation-play-state:running | paused [,running | paused] *
running是默认值，是播放的意思，可以通过paused停止播放。
animation-fill-mode：主要用来设置动画时间之外的属性，也就是动画开始前或者结束后的属性。
animation-fill-mode:none | forwards | backwards | both
默认值为none，表示动画按期执行与结束，在动画结束时，会反回初始状态。forwards，当动画结束时，停留在最后最后一帧(保持最后的状态)。backwards，当动画开始时迅速应用第一帧。both，同时拥有forwards与backwards的作用。
学以致用，学习完动画的基础知识后，就需要练习一下，把学的东西用出来。可以把代码复制在浏览器中观看效果。
- 第一张
- 第二张
- 第三张
- 第四张
- 第五张
CSS3动画完。
