CSS3动画

1.图片宽高动态变大

img{ height:15px; width:15px;}
img:hover{ height: 450px; width: 450px;}
//高度动画1s 宽度也是1s，但是有个延迟
img{ transition: 1s height, 1s 1s width;}

2.transition

img{ transition: 1s 1s height ease;}
//单独定义
img{
   transition-property: height; 
   transition-duration: 1s; 
   transition-delay: 1s; 
   transition-timing-function: ease;
}
//其中动画模式
（1）linear：匀速
（2）ease-in：加速
（3）ease-out：减速
（4）cubic-bezier函数：自定义速度模式

transition注意事项

1.各大浏览器（包括IE 10）都已经支持无前缀的transition
2.不是所有的CSS属性都支持transition
3.transition需要明确知道，开始状态和结束状态的具体数值
transition没法算出0px到auto的中间状态，也就是说，如果开始或结束的设置是height: auto，那么就不会产生动画效果。类似的情况还有，display: none到block，background: url(foo.jpg)到url(bar.jpg)等等。

transition的局限

1.transition需要事件触发，所以没法在网页加载时自动发生。
2.transition是一次性的，不能重复发生，除非一再触发。
3.transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
4.一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

3.animation为解决transition局限而生

3.1基本用法

@keyframes rainbow {
   0% { background: #c00; } 
  50% { background: orange; } 
  100% { background: yellowgreen; }
}
//动画只播放一次。加入infinite关键字，可以让动画无限次播放
div:hover { animation: 1s rainbow infinite;}

3.2 animation-fill-mode

动画结束以后，会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态，需要使用animation-fill-mode属性。

 div:hover { animation: 1s rainbow forwards;}
（1）none：默认值，回到动画没开始时的状态。
（2）backwards：让动画回到第一帧的状态。
（3）both: 根据animation-direction（见后）轮流应用forwards和backwards规则。

3.2 animation-direction

动画循环播放时，每次都是从结束状态跳回到起始状态，再开始播放。animation-direction属性，可以改变这种行为。

@keyframes rainbow { 
    0% { background-color: yellow; } 
    100% { background: blue; }
}
//默认normal
div:hover { animation: 1s  rainbow  3  normal;}

Paste_Image.png

4、animation的各项属性

div:hover { animation: 1s 1s rainbow linear 3 forwards normal;}

div:hover {
   animation-duration: 1s; 
   animation-delay: 1s; 
   animation-name: rainbow; 
   animation-timing-function: linear; //效果
   animation-fill-mode:forwards;   //结束状态，保持在最后状态
   animation-direction: normal;  //方向，normal从头到尾
   animation-iteration-count: 3; //执行次数
  }

5.@keyframes写法

@keyframes rainbow {
     0% { background: #c00 } 
    50% { background: orange }
    100% { background: yellowgreen }
}
@keyframes rainbow { /*等同上面的*/
    from { background: #c00 } 
    50% { background: orange }
     to { background: yellowgreen }
}
/*注意下面的合法,浏览器会自动推断的/
@keyframes rainbow {
     50% { background: orange } 
    to { background: yellowgreen }
}
@keyframes rainbow { 
    to { background: yellowgreen }
}
@keyframes pound {
     from，to { transform: none; }
     50% { transform: scale(1.2); }
}

6. 分步效果

div:hover { animation: 1s rainbow infinite steps(10);}

  /*打字效果*/
@keyframes typing { from { width: 0; } }
@keyframes blink-caret { 
    50% { border-color: transparent; } 
}
   h1 { 
      font: bold 200% Consolas, Monaco, monospace;
      border-right: .1em solid; width: 16.5em; /* fallback */ 
      width: 30ch; /* # of chars */ 
      margin: 2em 1em; 
      white-space: nowrap; 
      overflow: hidden;
      animation: typing 20s steps(30, end), /* # of steps = # of chars */  
              blink-caret .5s step-end infinite alternate;
}