CSS3-过渡、变形、动画

1. 过渡

在CSS3里使用 transition 可以实现补间动画（过渡效果）

1. 速写语法

   transition:要过渡的属性、花费时间、运动曲线、何时开始。
   /*如果有多组属性变化，用逗号隔开*/
   

2. 设置过渡属性名称

   transition-property :要过渡属性的名称（如width）
   

3. 设置过渡花费时间

   transition-duration :过渡花费的时间（默认是0,时间单位为s/秒）
   

4. 设置过渡时间曲线

   transition-timing-function :规定过渡效果的时间曲线默认是ease慢快慢,linear匀速,分步steps(4)
   

5. 设置延迟时间

    transition-delay:延迟效果，规定过渡效果何时开始（默认是0，即刻开始）
   

6. 设置所有属性都发生变化（过渡）

   transition:all 0.5s; /*简写，后面俩属性可以不写*/
   /*这种写法不建议使用，浏览器要挨个遍历属性效率低下，建议多组属性用逗号隔开书写*/
   

7. 过渡是H5中新增的样式好多老版本浏览器不支持，解决方法是加厂商前缀

   -moz-transition : left 2s steps(5);  
   -webkit-transition: left 2s steps(5);
   -o-transition: left 2s steps(5);
   

8. 监听过渡完成事件

   /*监听过渡完成的事件 transitionend*/
   .addEventListener('transitionend', function() {
        
   
   })
   

9. 注意：过渡写到本身上元素上，谁做过渡动画写到谁CSS里，不建议写到：hover里，因为鼠标移动没有过渡动画效果

2. 2D变形

简述： transform 是CSS3中最具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果

1. 移动

   transform:translate(x,y) 
   /*移动平移,可以改变元素的位置，x、y可以为负值，也可以是%相对于元素自己宽高的百分比，
    写一个值默认为 X。值要加上单位如：300px;*/
   /*=================================================