css3

一.关键帧动画
    animation 属性
    两个关键词:调用动画 animation,定义关键帧(动画)@keyframes
    1.定义关键帧
        兼容性前缀
        @-webkit-,谷歌
        @-moz-,火狐
        @-ms-,IE
        @-o-,欧朋
        @keyframes,w3c
        语法:
            @-webkit-keyframes aniName{
                from{
                    width:100px;
                }to{
                    width:200px;
                }
            }
            @keyframes aniName{
                0%{
                    width:100px;
                }
                10%{
                    width:130px;
                }
                20%{
                    width:180px;
                }
                80%{
                    width:250px;
                }
                100%{
                    width:300px;
                }
            }
    2.动画调用
         兼容性前缀
            @-webkit-,谷歌
            @-moz-,火狐
            @-ms-,IE
            @-o-,欧朋
            animation,w3c
            注:animation的各个参数,如果分开写也需要前缀
        综合写法:
            animation:aniName 1s linear 0s infinite alternate forwords paused;
        组合写法:
            参数1:animation-name:'aniName';
                调用动画的名称
            参数2:animation-duration:1s;
                动画持续的时间
            参数3:animation-timing-function:linear;
                动画运行轨迹
                    linear:匀速轨迹
                    ease-in:低速开始
                    ease-out:低速结束
                    ease:低速 加速 减速
                    ease-in-out:低速进入 低速结束
                    cubic-bezier(a,b,c,d);贝塞尔曲线
            参数4:animation-delay:1s;
                动画延迟属性,0s是不延迟,如果动画循环执行多次,那么只有开始的时候会延迟,之后的循环动画不会循环
            参数5:animation-iteration-count:10;
                动画循环次数,整数,infinite表示无限循环
            参数6:animation-direction:normal;
                动画播放方式
                    normal:正常的播放
                    reverse:反向播放
                    alternate:往返播放
                    alternate-reverse:反向的往返播放
                    initial:默认值
                    inherit:从父元素继承
            参数7:animation-fill-mode:forwords;
                动画执行结束的样式
                    none:动画结束不使用任何样式到目的地,返回原来的样式
                    forwords:动画结束展示结束时的状态
                    backwards: 动画结束瞬间回到开始的样子
                    both:遵循forwords和backwards的规则,在两个方向伤扩展动画属性   
                注:none 和 backwards都会返回原来的样式
                    forwards 和 both 都会停在结束时的样式
            参数8: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','_self')
                alert('浏览器版本过低,请升级');
            </script>
            <script src='js/html5shiv.js'></script>
        <![end] -->  
        html5新标签:header footer section aside main.......
        IE6,7,8虽然不支持 但是可以使用html5shiv.js,这个文件可以让低版本的浏览器支持新标签
三.2D变形
    css3中三大功能:
        1)过渡: transition
        2)动画: animation
        3)变形: transform     IE9
    1.旋转变形
        语法:
            transform:rotate(30deg);
        rotate:旋转属性
        deg:角度单位,一圈 360deg,  一圈 Π 弧度,    弧度=角度*Π/180  1弧度 = Π = 180deg
        正方向:垂直向上喂0deg,顺时针方向喂正方向(水平向左喂90deg)
        旋转角度: + (顺时针旋转) - (逆时针旋转)
            transform:rotate(90deg); == transform:rotate(-270deg);
            位置一样
        注意:任何变形都可以被过度
    2.缩放变形
        语法:transform:scale(1.3);
        scale:缩放,数字,大于1表示放大,小于1表示缩小
        scale(1.2,0.5)
            参数一:横向放大1.2倍
            参数二:纵向缩小0.5倍
        transform:scaleX(1.2) scaleY(0.5);
    3.扭曲变形
        语法:transform:skew(30deg,60deg);
        skew:歪斜扭曲,两个值分别是横向扭曲角度和纵向扭曲角度
        transform:skewX(30deg) skew(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为正数,向后反
        n为负数,向前反
    3.rotateY(ndeg)
        n为正数,向右反
        n为负数,向左反
    4.rotateZ(ndeg)
        Z轴:位于xy交叉点,方向垂直变形元素所在的平面,正方向是该位面正面对的方向
        n为正数,顺时针
        n为负数,逆时针
    5.rotate3d(a,b,c,d);
        a b c     0|1|-1
        a:x轴, 0: x轴不旋转, 1:向后翻转    -1:x轴向前翻转
         b:x轴, 0: y轴不旋转, 1:向右翻转    -1:x轴向左翻转
          c:x轴, 0: z轴不旋转, 1:顺时针翻转    -1:逆时针翻转
        n:表示旋转的角度
        rotate3d(1,0,-1,30deg);
    6.背面可见设置
        backface-visibility:hidden;
        背面默认是可见的,使用这个属性决定了一个元素翻转180deg
    7.旋转轴设置
        语法:
            transform-origin:10px 10%
            参数一:控制Y轴,从左到右10px的位置旋转
            参数二:控制X轴,从上到下10%的位置旋转
            百分比:变形元素宽高的百分之机
    8.移动位移
        2D位移:
            transform:translate(50px,50px);
                参数一:表示控制X轴移动
                参数二:控制Y轴移动
        3D位移
            transform:translateX(50px);
            transform:translateY(50px);
            transform:translateZ(50px);
            transform:translate3d(10px,20px,50px);