CSS3：动画

transition:all .6s;

//放大

transform:scale(1.2)

//平移

transform:translate(100px,100px);

//旋转

transform:rotate(190deg);

//注意覆盖问题：合并写；顺序：平移 旋转 放大缩小

==================================================

动画：较过渡更能控制细节

    -定义动画：from = 0% ;to=100%

    @keyframes scale_{

        0%{

            transform:scale(1);

        }

        25%{

            transform:scale(1.2);

        }

        50%{

            transform:scale(1.2);

        }

        75%{

            transform:scale(1.2);

        }

        100%{

            transform:scale(1);

        }

    }

    -调用动画：

    animation:scale_ 2s; 

    等效于：

        animation-name:scale_;

        animation-duration:2s;

        animation-timing-function:cubic-bezier();//linear

        //步长

        steps(N):

        animation-delay:1s;//延迟

        animation-iteration-count:2;//重复动画次数  //infinite;

        animation-direction:alternate;//方向播放

        animation-fill0mode:backwards;//返回初始化位置 //forwards:留在结束位置

        animation-play-state:paused;//暂停

    //不换行

    white-space:nowrap;

    overflow:hidden;

    transtion:all 1s;

===========================================================================================

3D:块元素，行内元素无效

    垂直屏幕向外：正向；向内为负向。

    perspective:500px;//透视

    transform: translateX(100px) translateY(100px) translateZ(100px)

    //3d位移等效

    transform:translate3d(100px,0,0);

    //旋转

    transform:rotateX(60deg); //往里转为正值

    transform:rotateY(60deg); //往里转

    transform:rotateZ(45deg); //顺时针转

    //等效于

    transform:rotate3d(x,y,z,deg);

    ex: transform:rotate3d(1,0,0,60deg);

======

    perspective:500px; //一般放在父级容器上，并且值得取值范围：不是越大越好。一般500左右+-200

    //控制子元素，是否开启三维立体空间。往往放在父亲元素上生效

    transform-style:preserve-3d;

    默认值：transform-style:flat;

过渡：作用到变化对象的身上 //CSS跟js同样都可以实现；根据实际开发调整。

    第一个参数  表述变化的属性

    第二个参数  表述持续时间

    第三个参数  表述运动曲线

    第四个参数  延迟

    transition:width 1s ease 1s,height 1s;

    transition:all 1s;

前端方向：工程化    图形学等    ————更加要明白