04 CSS CORE 转换、动画和过渡

******************************

CSS Hack---头部引用Hack
1、转换
2、过渡
3、动画
4、CSS 优化
******************************

===================================================转换=======================================
1、转换
    1、转换简介
        1、什么是转换
            改变元素在页面中的大小，位置，角度和形状的一种方式

        2、转换分类
            1、2D转换
                使元素在x轴和y轴上发生变化效果
            2、3D转换
                在2D转换基础上，增加 z轴的变化效果
        3、转换属性
            属性：transform
            取值：
                1、none
                    默认值，不进行任何转换
                2、转换函数
                    表示一个或者多个转换函数，如果是多个函数的话，中间以空格分开
        4、转换原点
            属性：transform-origin
            默认情况下，原点是在整个元素的中心位置处
            取值：数值/百分比/关键字
            两个值：表示 x轴 和 y轴的位置
            三个值：表示 x轴 ，y轴 ，z轴的位置
    2、2D转换
        1、2D位移
            1、属性 和 函数
                属性:transform
                函数:
                    translate(x) :元素在x轴上的位移距离，取值为正，向右移动，取值为负，向左移动
                    translate(x,y) :
                        x表示x轴位移距离
                        y表示y轴位移距离，取值为正，向下移动，取值为负，向上移动
                    translateX(x) :只改变元素在x轴上的位置
                    translateY(y) :只改变元素在y轴上的位置
                取值：
                    1、数值
                    2、百分比
        2、2D缩放
            1、作用
                改变元素在页面中的大小
            2、属性和函数
                属性：transform
                函数：
                    scale(value),如果只给一个值，那么x轴和y轴将等比缩放
                    scale(x,y):改变 x轴和y轴的缩放比例
                    scaleX(x):只改变x轴的缩放比例
                    scaleY(y):只改变y轴的缩放比例
                取值：
                    默认值 为1
                    缩小：0~1 之间的数值
                    放大：大于1的数值
        3、2D旋转
            1、作用
                改变元素在页面中的角度
            2、属性 和 函数
                属性：transform
                函数：rotate(ndeg)
                    n取值为正，则顺时针旋转
                    n取值为负，则逆时针旋转
            3、注意
                1、转换时，坐标轴会一起进行转换
                2、转换原点可以影响转换效果
        4、2D倾斜
            1、作用
                改变元素在页面上的形状
            2、属性 和 函数
                属性：transform
                函数：
                    skew(xdeg) : x轴倾斜指定角度
                        实际上时改变 y轴的倾斜角度
                        取值为正：逆时针
                        取值为负：顺时针
                    skewX(xdeg) : 效果同上
                    skewY(ydeg) : y轴倾斜指定角度
                        实际上是改变 x轴的倾斜角度
                        取值为正：顺时针
                        取值为负：逆时针
    3、3D转换
        1、3D转换
            增加 z轴 转换效果
        2、属性
            属性：perspective
            作用：模拟 人眼睛到 3D投射元素的距离
            注意：该属性 需要加在 3D转换元素的父元素上
            兼容性：
                火狐：-moz-perspective:
                Chrome，Safari:-webkit-perspective
                Opera:-o-perspective
        3、3D旋转
            允许元素在 x轴，y轴，z轴上进行旋转操作

            属性 和 函数
            属性:transform
            函数：
                rotateX(xdeg):以x轴为中心轴进行元素的旋转
                rotateY(ydeg)
                rotateZ(zdeg)
                rotate3D(x,y,z,ndeg)
                    x,y,z,如果取值为 0的话，说明该轴不参与旋转
                    x,y,z,如果取值为 1的话，说明该轴是参与旋转的

                    rotate3d(0,0,1,45deg)-- rotatez(45deg)

                    rotate3d(1,1,0,45deg)
    4、3D位移
        1、作用
            改变元素在z轴上的位置
        2、属性 和 函数
            属性：transform
            函数：
                translateZ();
                translate3D(x,y,z)
        3、属性 : transform-style
            作用：规范当前元素的子元素如何去排列3D位置
            取值：
                1、flat
                    默认值，不保留子元素的3D位置
                2、preserve-3d
                    保留子元素3d位置

==============================================过渡=======================================
2、过渡
    1、什么是过渡
        使得CSS的属性值在一段时间内平滑过渡
    2、过渡的 4个要素(属性)
        1、指定过渡属性
            属性：transition-property
            作用：规定应用过渡效果的CSS属性名称
            取值：
                1、none
                2、all
                3、property-name : 具体使用过渡效果的属性名称
            可以设置过渡的属性：
                1、颜色属性
                2、取值为数值的属性
                3、转换属性
                    transform
                4、渐变属性
                5、visibility 属性
                6、阴影属性
            ex:
                div{
                    transition-property:background;
                }
        2、指定过渡时间
            属性：transition-duration
            取值：以秒(s) 或 毫秒(ms) 作为单位的
            默认值为0，即没有过渡效果
            ex:
                div{
                    transition-property:background;
                    transition-duration:300ms;
                }
        3、指定速度时间曲线函数
            属性：transition-timing-function
            取值：
                1、ease : 默认值，慢速开始，快速变快，慢速结束
                2、linear : 匀速
                3、ease-in : 慢速开始，加速结束
                4、ease-out: 快速开始，减速结束
                5、ease-in-out:慢速开始和结束，中间先加后减
            ex:
                div{
                    transition-property:background;
                    transition-duration:300ms;
                    transition-timing-function:linear;
                }
        4、指定过渡延迟时间
            属性：transition-delay
            取值：ms 或 s 作为单位的数值
    3、触发过渡效果
        一般都是由用户行为触发
    5、过渡属性-过渡子属性的简写模式
        transition:property(必须的)  duration（必须的）  timing-function delay;

ex:  transition:background 2s linear 1s;

===============================================动画======================================
3、动画
    1、什么是动画
        使元素从一种样式逐渐变化为另一种样式
        其原理是通过 关键帧（每个关键帧利用过渡连接起来） 控制动画的每一步

        注意：css中使用动画一般会出现浏览器兼容性问题，与动画相关的尽量加上前缀
            通过了浏览器前缀解决兼容性
            -moz-
            -webkit-
            -o-
    2、使用动画的步骤
        1、声明动画
            声明动画的名称，并且指定每个关键帧的信息
            关键帧：
                1、时间点
                2、该时间点上的状态(样式/状态)
        2、使用动画
            通过动画属性，将动画效果绑定到某个元素上
    3、声明动画
        语法
        @keyframes 动画名称{
            0%{
                动画开始时元素的样式声明
            }
            ... ...(1% ~ 99%)
            100%{
                动画结束时元素的样式声明
            }
        }
        
        兼容 Chrome Safari
        @-webkit-keyframes 动画名称{
            0%{
                动画开始时元素的样式声明
            }
            ... ...(1% ~ 99%)
            100%{
                动画结束时元素的样式声明
            }
        }

        兼容 Firefox
        @-moz-keyframes 动画名称{
            0%{
                动画开始时元素的样式声明
            }
            ... ...(1% ~ 99%)
            100%{
                动画结束时元素的样式声明
            }
        }

        时间点：
            0%（from） : 动画开始的时候
            50% : 动画运行到一半的时候
            100%(to) : 动画结束的时候
    4、动画的调用
        1、animation-name
            要调用的动画名称
        2、aniamtion-duration
            动画完成一个周期需要用的时间
            以s 或 ms 为单位
        3、animation-timing-function
            动画的 速度时间 曲线函数
            ease
            linear
            ease-in
            ease-out
            ease-in-out
        4、animation-delay
            动画执行延迟时间
            s|ms为单位
        5、animation-iteration-count
            动画播放次数
            取值：
                1、具体数值
                2、infinite
                    无限次播放
        6、animation-direction
            动画播放方向
            取值：
                1、normal
                    默认值，正向播放，即从 0%~100%
                2、reverse
                    逆向播放，即从100% ~ 0%
                3、alternate
                    轮流播放，动画在奇数次数播放时，从 0% ~ 100%,动画在偶数次数播放时，从100% ~ 0%
        7、animation属性
            animation:name duration timing-function delay iteration-count direction;
        8、animation-fill-mode
            动画播放前后的填充方式
            取值：
                1、none
                    默认值，不改变默认行为
                2、forwards
                    动画完成后，将保持在最后一个关键帧的状态上
                3、backwards
                    动画播放前(在延迟时间内)，将元素保持在第一个帧的状态上
                4、both
                    动画播放前后的填充模式都应用
        9、animation-play-state
            动画的播放状态
            取值：
                1、paused
                    暂停
                2、running
                    播放