CSS3动画

@keyframes关键帧的语法：

1.命名以@keyframes开头，后面紧跟着是“动画的名称”，再加上一对花括号“{…}”，括号种就是不同时间段样式规则，即CSS样式。
2.一个@keyframes中的样式规则是由多个百分比构成的，如0%~100%，可以在这个规则中创建更多个百分比，从而让元素达到一种不断变化的效果。（百分号不可省略，否则@keyframes是无效的）
3.可以使用“from” “to”代表一个动画是从哪开始，到哪结束，也就是说from就相当于0%，而to相当于100%。

@keyframes IDENT {
form{
    /*CSS样式写在这里*/
  }
percentage{
    /*  CSS样式写在这里*/
  }
to{
    /*CSS样式写在这里*/
  }
}

@keyframes IDENT{
0%{
    /*CSS样式写在这里*/
  }
percentage{
    /*CSS样式写在这里*/
  }
100%{
    /*CSS样式写在这里*/
  }
}

其中IDENT就是一个动画名称，可以取一个任意定义的动画名称；percentage是一个百分比值，用来定义某个时间段的动画效果。

---

CSS3动画属性：

animaton: [animation-name] || [animation-duration] || [animation-timing-function] || [animation-delay] || [animation-iteration-count] || [animation-direction] || [animation-play-state] || [animation-fill-mode]

• animation-name：主要用来指定一个关键帧动画的名字，这个动画名必须对应一个@keyframes规则。CSS加载时会应用animation-name指定的动画，从而执行动画。
  animation-name: none | IDENT ;
  1.IDENT：是由@keyframes创建的动画名称，换句话说IDENT需要和@keyframes中的IDENT一致，如果不一致将不能实现任何动画效果。
  2.none：为默认值，当值为none时，将没有任何动画效果，其可以用于覆盖任何动画。

• animation-duration：主要用来设置动画播放所需要的时间，一般以秒为单位。
  animation-duration:
  1.是用来指定元素播放动画所持续的时间，也就是从0%~100%一次动画所需时间，取值为数值，单位为秒。
  2.默认值为0，意味着动画周期为0，也就是没有动画效果，如果值为负值会被视为0.

• animation-timing-function：主要用来设置动画的播放方式。
  animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(number,number,number,number)
  1.ease：默认值，元素样式从初始状态过渡到终止状态时速度由快到慢，逐渐变慢。
  2.linear：元素样式从初始状态过渡到终止状态速度是恒速。
  3.ease-in：元素样式从初始状态过渡到终止状态时，速度越来越快，呈一种加速状态，这种效果称为渐显效果。
  4.ease-out：元素样式从初始状态过渡到终止状态时，速度越来越慢，呈一种减速状态，这种效果称为渐隐效果。
  5.ease-in-out：元素样式从初始状态到终止状态时，先加速再减速，这种效果称为渐显渐隐式效果。
  6.cubic-bezier：三次贝塞尔曲线值分别为（p0，p1，p2，p3），值为0~1之间的小数，注意p0和p3两个点是无法设置的，因为他们总是存在HTML种，也就是说他们总会是（0,0）和（1,1）。

• animation-delay：主要用来指定动画开始的方式，一般以秒为单位。
  animation-delay: time
  1.取数值，单位为秒，用于定义在浏览开始执行动画之前等待的时间。

• animation-iteration-count：主要用来指定动画播放的循环次数。
  animation-iteration-count: infinite | number
  1.infinite(正无穷)：动画无限次地播放。
  2.值通常为整数，但也可以使用带有小数的数字。其默认值为1，意味着动画将从开始到结束只播放一次。

• animation-direction：主要用来指定动画的播放方向。
  animation-direction: normal | alternate
  1.normal：为默认值，动画的每次循环都是向前播放。
  2.alternate：动画播放为偶数次则向前播放，为奇数次则反方向播放。

• animation-play-state：主要用来控制动画的播放状态。
  animation-play-state: running | paused
  1.running：主要作用类似于音乐播放器，可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，也可能是从暂停的那个位置开始播放。
  2.paused：可以通过paused将正在播放的动画停下来，如果暂停了动画的播放，元素的样式将回到最原始设置状态。

• animation-fill-mode：主要用来设置动画的时间外属性，即动画在开始和结束之后发生的操作。
  animation-fill-mode: none | forwards | backwards | both
  1.none：为默认值，表示动画按预期进行和结束，在动画完成最后一帧时，动画会反转到初始帧处。
  2.forwards：动画结束后继续应用最后关键帧的位置。
  3.backwards：会在向元素应用动画样式时迅速应用动画的初始帧。
  4.both：元素动画同时具有forwards和backwards效果。

animation的子属性可以合在一起写，每个子属性之间用空格隔开；还可以将多个动画应用到一个元素上，包括每个动画名称的简写的分组以逗号分隔开。