css3动画与变形

一、关键帧动画
    animation 属性
    两个关键：调用动画，定义关键帧
    1，关键帧定义语法
        @keyframes name{
            from{
                width:100px;
            }to{
                width:200px;
            }
        }
        @keyframes name{
            0%{
                width:100px;
            }
            10%{
                width:120px;
            }
            20%{
                width:150px;
            }
            80%{
                width:180px;
            }
            100%{
                width:200px;
            }
        }
        根据浏览器的不同，加不同的前缀：
            @-webkit-keyframes name{} 谷歌
            @-moz-keyframes name{} 火狐
            @-ms-keyframes name{} ie
            @-o-keyframes name{} 欧朋
            @keyframes name{} w3c
    2,调用
        animation: name 1s linear 0s infinite alternate forwards paused;
        参数1：-webkit-animation-name:'name'
            调用动画的名称
        参数2：-webkit-animation-duration:1s;
            动画持续的时间
        参数3:-webkit-animation-timing-function:linear;
            动画运行轨迹
            linear  匀速
            ease-in  低俗开始
            ease-out  低速结束
            ease 低速 加速 减速
            ease-in-out  低速开始，低速结束
            cubic-bezier(a,b,c,d)  贝塞尔
        参数4：-webkit-animation-delay:1s;
            动画延迟时间，0s是不延迟，动画只有第一次会延迟
        参数5：-webkit-animation-iteration-count:10;
            动画循环次数，整数，infinite无限循环
        参数6:-webkit-animation-direction:normal;
            动画播放方式
            normal  正常播放
            reverse  反向播放
            alternate  往返播放
            alternate-reverse 往返反向播放
            initial  默认值
            inherit 从父元素继承
        参数7：-webkit-animation-fill-mode:forwards;
            动画执行结束时的样式
            none  动画执行结束不用然后样式到达目的地，返回原来样式
            forwards 动画结束展示结束时的样式
            backwards  动画结束瞬间回到原始样式
            both  遵循forwards和backwards的规则，在两个方向上扩展动画属性
            总结：
                none和backwar  都会返回
                forwards和both 都会停在最后一针
        参数8：-webkit-animation-play-state:paused;
            都会播放状态
            paused： 暂停
            running：动画正在播放（默认）
            js控制动画播放：
                box.style.WebkitAnimationPlayState='paused';
    3,transition &animation 对比
        t:对元素的某个或多个属性变化进行过渡，只有开始结束，需要触发，不能使用js对其控制，只能执行一次
        a:对元素一个或多个属性变化进行控制，可以设置多个关键帧，不需要触发可以直接执行，可以通过js进行精准控制，可以无限循环播放
二、兼容性策略
    1，平稳退化
        对于老版本浏览器，不考虑效果，只要能展示内容即可，平稳退化就是逐渐的放弃老版本浏览器
    2，渐进增强
        对于低版本浏览器给予普通的功能，增强高端浏览器的功能和效果，渐进增强就是渐渐的放弃老版本浏览器
    3，破罐子破摔
        直接禁止老版本浏览器
        <!-- -->
        <!--[if lte IE 8]>
            <script>
                window.open='error.html';
                console.log('您的浏览器版本过低');
            </script>
        <![endif] -->
        html5新标签: header footer section aside main.....
        但是ie678是不支持的，有大牛写了一个兼容性文件叫做：html5shiv.js，能够将新标签转换为div展示
三、2D变形
    css3中有三大功能：
        1）过渡  transition
        2）动画  animation
        3）变形  transform  ie9兼容
    1，旋转变形
        语法：
            transform：rotate(30deg);
        rotate:旋转
        deg:角度单位，一圈是360度，360deg
        eg  弧度=角度 * π/180
        1弧度=π=180度
        正方向：垂直向上为0度，顺时针方向  （水平向左为90度）
        旋转角度： +-
            transform：rotate(90deg)==>transform:rotate(-270deg)
        任何变形都可以被过渡
    2，缩放变形
        语法：
            transform:scale(1.3);//0.3
        scale:缩放，正数，放大大于1，缩小小于1
        scale(1.2,0.5);
            参数1：横向放大1.2倍
            参数2：纵向缩小0.5倍
        transform:scaleX(1.2) scaleY(0.5);
    3，扭曲变形
        语法：
            transform:skew(30deg,,60deg)
        skew:歪斜扭曲，两个值分别是横向扭曲角度和纵向扭曲角度
        transform:skewX(30deg) skewY(60deg);
    总结： 2D变形有三种：旋转缩放扭曲
        transform:rotate(30deg) scale(2,0.4) skew(20deg,30deg);
四、3D变形
    1，舞台与演员
        ie10开始兼容的
        3D变形与2D变形其实上多了一个舞台的概念，舞台的作用是负责添加景深(perspective)，单位是px，表示你的眼睛距离这个舞台的距离，也可以理解为3D变形元素的陡峭程度，演员就是其中变形的元素，使用transform进行变形
    2，rotateX(ndeg)
        绕着X轴翻转
        n为正数：向后仰
        n为负数：向前爬
    3，rotateY(ndeg)
        绕着Y轴转圈
        n为正数：向右转 （旁观者）
        n为负数：向左转 （旁观者）
    4，rotateZ(ndeg)
        绕着Z轴旋转
        Z轴：位于X轴与Y轴的交叉点，方向垂直变形元素所在的平面，正方向是该平面正对的方向
        n为正：顺时针
        n为负：逆时针
    5，rotate3d(a,b,c,n)
        a,b,c 0|1|-1
        a:X轴，0：x轴不旋转，1：x轴向后翻转，-1：x轴向前翻转
        b:Y轴，0：y轴不旋转，1：y轴向右翻转，-1：y轴向左翻转
        a:Z轴，0：z轴不旋转，1：z轴顺时针翻转，-1：z轴逆时针翻转
        a:角度
        rotate3d(1,0,0,30deg)
    6，背面可见设置
        backface-visibility:hidden;
        背面默认是可见的，这个属性决定了一个元素翻转180度后背面是否展示
    7，旋转轴位置设置
        语法：
             -origin:10px 10%;
        参数1：控制Y轴的位置，从左到右10px的位置
        参数2：控制X轴的位置，从上到下10%的位置
        百分比：变形元素的百分之几
    8，移动，位移
        2D位移：
            transform:translate(50px,50px);
                参数1：控制X轴方向移动
                参数2：控制Y轴方向移动
        3D位移：
            transform:translateX(50px);
            transform:translateY(50px);
            transform:translateZ(50px);
            transform:translate3d(50px);