CSS3动画

1、keyframes介绍

      keyframers被称为关键帧，@keyframes开头，后面紧跟动画名称加上一对花括号“{ ... }”，括号中就是一些不同时间段样式规则。

@keyframes changecolor{
  0%{
   background: red;
  }
  100%{
    background: green;
  }
}

在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from,100%对应的是to

通过“@keyframes”声明一个名叫“wobble”的动画，从“0%”开始到“100%”结束，同时还经历了一个“40%”和“60%”两个过程。“wobble”动画在“0%”时元素定位到left为100px，背景色为green，然后在“40%”时元素过渡到left为150px,背景色为orange,接着在“60%”时元素过渡到left为75px，背景色为blue，最后“100%”时结束动画，元素又回到起点left为100px处，背景色变为red。

@keyframes wobble {
  0% {
    margin-left: 100px;
    background:green;
  }
  40% {
    margin-left:150px;
    background:orange;
  }
  60% {
    margin-left: 75px;
    background: blue;
  }
  100% {
    margin-left: 100px;
    background: red;
  }
}
div {
  width: 100px;
  height: 100px;
  background:red;
  color: #fff;
}
div:hover{
  animation: wobble 5s ease .1s;
}

2、调用动画

     animation-name 属性主要用来调用@keyframes定义好的动画，注意，animation-name调用的动画名需要和“@keyframes”定义的动画名称完全一致，区分大小写。

         animation-name:none  |  IDENT[,none|DENT]*;

         IDENT 是由@keyframes创建的动画名。

         none 为默认值，当值为none,将没有任何动画效果，可以用于覆盖任何动画。

3、设置动画播放时间 animation-duration

         animation-duration主要用来设置css3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。

 
@keyframes changeColor {
  from {
    background: red;
  }
  to {
    background:green;
  }
}

animation-name: changeColor;
  animation-duration: 5s;
  animation-timing-function: ease-out;
  animation-delay: .1s;

4、animation-timing-function 设置动画的播放方式

5、设置动画开始播放的时间

     animation-delay : 用来定义动画开始播放的时间，用来出发动画播放的时间点。和transition-delay属性一样。
6、设置动画播放的次数

     animation-iteration-count属性主要用来定义动画的播放次数。

      animation-iteration-count: infinte | <number> | [, infinite | <number>]*;

      1) 其值通常为证书，但也可以使用带小数的数字，其默认值为1，意味着动画从开始到结束只播放一次。

      2) 取值为 infinite 动画将会无限次的播放。

animation-iteration-count:5;

7、设置动画播放的方向 

     animation-direction 属性用来设置动画播放的方向。

animation-direction:normal | alternate [, normal | alternate]*

      normal 是默认值，动画的每次循环都是向前播放。

      alternatre,动画播放在第偶数次向前播放，第奇数次向反方向播放。
8、设置动画的播放状态 

     animation-play-state 用来控制元素动画的播放状态。

      值主要有两个：running 和 paused 

      running是默认值，主要作用就是类似音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素的开始位置播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。

例如：页面加载时，动画不播放 

animation-play-state:paused

9、设置动画时间外属性

  animation-fill-mode 属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none/forwards/backgrounds/both

    none:默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处。

    forwards : 表示动画在结束后继续应用最后的关键帧的位置

    backwards : 会再向元素应用动画样式时，迅速应用动画的初始帧。

    both: 元素动画同事具有forwards 和 backgrounds效果

默认情况下，动画不会影响它的关键帧之外的属性，使用animate-fill-mode属性可以修改动画的默认行为，简单的说就是告诉动画在第一帧关键帧上等待动画开始，或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。或者具有这两个效果。

例如： 让动画停在最后一帧处

animation-fill-mode : forwards;