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;*/
   /*======================================================================================*/
   /*X,Y也可以分开写:*/
   transform:translateX(300px)
   transform:translateY(300px)
   /*注：a. 移动是相对于元素左上角坐标  b. 执行完毕会回复原始状态*/
   

2. 缩放

   transform:scale(0.8, 1) 
   /*表示宽度缩放为 80%，高度不变，1为100%，只写一个值默认为宽高一起缩放,
    配合过渡一起可以做图片缩放效果*/
   /*======================================================================================*/
   /* X,Y也可以分开写:*/
   transform:scaleX(2)
   transform:scaleY(2)
   /*注：a. 缩放是以元素中心为原点  b. 执行完毕会回复原始状态*/
   

3. 旋转

   transform:rotate(45deg); 
   /*deg为旋转的度数，正数数值为顺时针旋转，负数数值为逆时针旋转
   注：a. 相对于Z轴旋转   b. 执行完毕会回复原始状态*/
   

4. 倾斜

   transform：skew(deg,deg)  
   /*倾斜的度数，俩值分别为X水平倾斜、Y垂直倾斜，可以取负值，第二个参数不写默认为0*/
   /*如果角度为正,则往当前轴的负方向倾斜，如果角度为负,则往当前轴的正方向倾斜;写两个值先倾斜水平方向，再倾斜垂直方向*/
   /*============================================================================================*/
   /*也可以单独书写水平、垂直方向倾斜*/
   skewX();
   skewY();
   /*注：相对于中心位置进行倾斜  b. 执行完毕会回复原始状态*/
   

5. 设置转换变形的原点

   transform-origin: right bottom; /*右下角的意思；也可以用数值*/
   transform-origin: 10px 10px;/*表示原点为x、y轴的10px处。一般默认为元素的中心点为原点*/
   

6. 一般常用的是移动、缩放、旋转

7. 注意

   移动、缩放、旋转、倾斜同时分开写会出现层叠。
   正确的写法是连写空格隔开：transform：translate(100px，100px) scale(0.3)
   移动和旋转同时的情况下,移动写在前面,否则会改变移动的方向
   

   配合过渡，需把 transform 给过渡当要做过渡的属性
   

3. 3D变形

3D是基于2D的也是使用transform

1. 移动

    transform: translate3d(x,y,z) /*使元素在这三个经纬轴中移动,必须写三个值*/
    /*也可以分开写：*/
    transform: translateX(300px) 
    transform: translateY(300px) 
    transform: translateZ(300px) /*Z轴移动在平面上看不出效果*/
   

2. 缩放

    transform：scale3d(0.5,1,2)  /*值参考2D*/
    /*也可以分开写:*/
    transform：scale3dX(0.5,1,2) 
    transform：scale3dY(0.5,1,2) 
    transform：scale3dZ(0.5,1,2) /*Z轴缩放在平面上看不出效果*/
   

3. 旋转

    transform: rotate3d(x,y,z,deg); 
    /*x：代表 x 轴上的一个向量值
      y：代表 y 轴上的一个向量值
      z：代表 z 轴上的一个向量值
    deg：代表旋转的度数
    如果只围绕一个轴旋转，其它两个轴写0即可，一个轴值写多大都一样，一般取1
    多个轴会根据每个轴的向量值来确定旋转的轴线*/
   

4. 保留3D转换的结果

   /* 使被转换的子元素保留其3D转换效果（需要设置在父元素中）*/
   transform-style: preserve-3d;
   /*取值：flat  不保留，默认值
        preserve-3d  保留*/
   

5. 透视、景深效果（前面不需要加transform）

    /*A. 深度：*/
       perspective: 500px; /*一般写500px就好，透视度写给父级盒子*/
       /*0为元素中的中心点，加大是往屏幕外的方向，减小是往屏幕里面方向；去观看元素盒子*/
   
    /*B. 角度：*/
       perspective-origin：0px 0px; /*规定镜头在平面上的位置。默认是放在元素的中心
       两个参数为x、y,可取正负数切换角度*/ 
   

6. 定义当元素不面向屏幕时是否可见

    backface-visibility:hidden; 
   

4. 动画

1. 语法:

   animation: 动画名称、花费时间、运动曲线、何时开始、播放次数、是否反方向   
   /*一般简写只写前两个属性，后面都是默认的*/
   

2. 属性:

   1. 规定动画： @keyframes 
   
   2. 属性简写： animation  所有动画属性的简写属性，除了 animation-play-state 属性。
   
   3. 动画名称： animation-name 规定 @keyframes 动画的名称。
   
   4. 动画耗时： animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
   
   5. 速度曲线： animation-timing-function 规定动画的速度曲线。默认是ease慢快慢,linear匀速,分步steps(4)
   
   6. 动画延迟： animation-delay 规定动画何时开始。默认是0s。
   
   7. 动画次数： animation-iteration-count 规定动画被播放的次数。默认是 1。（无限次infinite）
   
   8. 交替动画： animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。（逆向alternate）
   
   9. 动画播放状态： animation-play-state 规定动画是否正在播放或暂停(paused)。默认是 "running播放"。
   
   10. 动画之外的状态：animation-fill-mode： 规定对象动画时间之外的状态。
   取值：forwards 保留动画结束时的状态，在设置了动画延迟和初始状态（如：旋转）的情况下，
               不会立刻执行动画的初始状态
         backwards 不会保留动画结束时的状态，但是如果在设置了动画延迟和初始状态（如：旋转）的情况下，
               会立刻执行动画的初始状态
         both  既保留动画结束状态，在设置了动画延迟和初始状态（如：旋转）的情况下，
               也会立刻执行动画的初始状态
   

3. 用法：

   /*在需要动画的元素的 css 里调用方法（函数） animation：动画名称 花费时间...
   然后在css页面声明函数（方法）*/
   @keyframes 动画名称{
        form{
            从哪开始，如：
             left:0;  
        }
        to{
            到哪结束,如：
            left:1000px;
        }
    }
   /*=================================================================*/
    /*另一种百分比写法:*/
   @keyframes 动画名称{
        0%{
            从哪开始，如：
             left:0;  
        }
        50%{
            到哪结束,如：
            left:1000px;
        }
        100%{
   
        }
    }
    /*注：0%可以写成form   100%可以写成to
   注：可以用百分比方式来设定动画各个时段的状态，每个时段都是一个关键帧，中间的动画过程叫补间	动画。
   注：过渡只有两个关键帧*/