css3动画

css3动画可以分为两种：过渡动画、关键帧动画

一、过渡动画（transition）

       过渡动画就是从开始状态到结束状态这个过程中所产生的动画·。所谓的状态是指大小、位置、颜色、变形（transform）等这些属性。css过渡动画只能定义首位两个状态，所以是最简单的一种动画。

       要想使用一个元素产生过渡动画，用transition属性定义动画的参数有：

       transition-property:规定对哪个属性进行过渡

       trsnsition-duration:定义过渡的时间，默认是0

       transition-timing-function:定义过渡动画的缓动效果，如淡入、淡出，默认是ease

       transition-delay:规定过渡效果的延迟时间，即在过了这个时间后才开始动画，默认是0

       .animate-div{
                transition-property: width;/*对宽度进行过渡*/
                transition-duration: 3s;/*过度时间为3s*/
                transition-timing-function: ease;/*缓动效果为ease*/
                transition-delay: 3s;/*延迟3s后才开始过渡*/
      }
     简写
     .animate-div{transition: width 3s ease 3s;}
     如是使用属性的默认值，则可以省略
     .animate-div{transition: width 3s;}
     相当于
     .animate-div{transition: width 3s ease 0;}
     如果想要同时使用多个属性，可以使用逗号隔开
     .animate-div{transition: width 3s, height 3s, background-color 3s;}

    使用transition属性只是规定了要如何去过渡，想要让动画发生，还得要有元素状态的改变。如何改变元素状态呢，即在css中给这个元素定义一个类（：hover等伪类也可以），这个类描述的是过渡动画结束时的状态。

二、关键帧动画（keyframes）

        关键帧动画不同于过度动画只能定义首位两个状态，他可以定义多个状态，进而实现更复杂的动画效果。

        关键帧动画使用一个关键字@keyframes来定义动画。具体格式为：

       @keyframes 动画名称{

                  时间点{元素状态}

                  时间点{元素状态}

                  ......

        }

       参数：

       只要像这样把定义好的动画绑定到元素上，就能实现关键帧动画了，而不是像第一种过渡动画那样，需要一个状态的改变才能触发动画。

    

     为了兼容浏览器，还需加上各大浏览器的私有前缀