【金秋打卡】第10天 CSS3中的变形与动画（四）

课程名称：十天精通CSS3

课程章节： CSS3中的变形与动画（下）

主讲老师：大漠

课程内容：

今天学习的内容包括：animation-delay的使用？animation-iteration-count的使用？animation-direction的使用？animation-play-state的使用？animation-fill-mode的使用？

课程收获：

animation-delay属性用来定义动画开始播放的时间，用来触发动画播放的时间点。

animation-iteration-count属性主要用来定义动画的播放次数。使用方法animation-iteration-count: infinite | <number> [, infinite | <number>]*。其中通常为整数，但也可以使用带有小数的数字。如果取值为infinite，动画将会无限次的播放。兼容性方面，我们需要注意的是Chrome或Safari浏览器，需要加入-webkit-前缀。

animation-direction属性主要用来设置动画播放方向。使用方法animation-direction:normal | alternate [, normal | alternate]*，其中normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；如果值是alternate，他的作用是动画播放在第偶数次向前播放，第奇数次向反方向播放。浏览器还是需要加入-webkit-前缀。

animation-play-state属性主要用来控制元素动画的播放状态。参数主要有两个值，分别为running和paused。其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。

animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。none是默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处。forwards表示动画在结束后继续应用最后的关键帧的位置。backwards表示会在向元素应用动画样式时迅速应用动画的初始帧。both表示元素动画同时具有forwards和backwards效果。

今天学习了边框的9-5到9-10的6个小结，花费了65分钟，今天主要学习了动画效果的其他属性，我们可以通过今天的学习来控制动画执行的次数，以及动画的方向是向左还是向右，我们还可以控制动画的开始和暂停效果，除此之外，我们还可以在动画开始之前或者结束之后进行额外的其他操作。