CSS3动画

记录这篇文章主要为了对css动画相关遗忘，平常开发时不经常做css动画效果，只是单纯的业务开发，当遇到复杂动画时需要看下文档才能实现动画。就是为了加深对动画理解的印象

一 . CSS Transition(过渡)

在CSS 3引入Transition（过渡）这个概念之前，CSS是没有时间轴的。也就是说，所有的状态变化，都是即时完成。

• 基本四个属性

div {

    transiton:  transition-property transition-duration transition-timing-function transition-delay 

    /* 
        transition-property 规定应用过渡的 CSS 属性的名称。  3
        transition-duration 定义过渡效果花费的时间。默认是 0。  3
        transition-timing-function  规定过渡效果的时间曲线。默认是 "ease"。 3
        transition-delay    规定过渡效果何时开始。默认是 0。
     */
}

• transition-timing-function

  这个属性是过渡时间曲线，可以理解一个 路程 = 时间 * 速度，主要看斜率的变化。

  （1）linear：匀速

  （2）ease-in：加速

  （3）ease-out：减速

  （4）cubic-bezier函数：cubic-bezier(.83,.97,.05,1.44);自定义速度模式-贝塞尔曲线

• transition的使用注意

  1. 目前，各大浏览器（包括IE 10）都已经支持无前缀的transition，所以transition已经可以很安全地不加浏览器前缀。
  2. 不是所有的CSS属性都支持transition，完整的列表查看这里，以及具体的效果。
  3. transition需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。比如，height从0px变化到100px，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规则，只能定义一个属性的变化，不能涉及多个属性。

注意
CSS Animation就是为了解决这些问题而提出的。

二 . CSS Animation(动画)

敬请期待