过渡 动画 转换

过渡  transition

1、transition-property    过渡的样式

2、transition-duration    运动时间，单位是秒

3、transition-delay         延迟时间

4、transition-timing-function    运动形式

        1）ease    先慢后快在慢

        2）linear    匀速

        3）ease-in    加速

        4）ease-out    减速

        5）ease-in-out    先快后慢

        6）cubic-bezier    贝塞尔曲线

        7）steps    逐帧动画

给hover加transition，只有鼠标经过时有过渡，离开后没有

且简写时，两个时间后面的代表延迟

    

写法

    1、先写默认样式

    2、再写鼠标经过的样式

    3、添加过渡动画

    过渡动画做鼠标经过，必然用到定位

 

动画    animation

1、animation name（名字随意起）

2、@keyframes name（和animation的名字必须一致）

        1、transition-property    过渡的样式

        2、transition-duration    运动时间，单位是秒

        3、transition-delay         延迟时间

        4、transition-timing-function    运动形式

                1）ease    先慢后快在慢

                2）linear    匀速

                3）ease-in    加速

                4）ease-out    减速

                5）ease-in-out    先快后慢

                6）cubic-bezier    贝塞尔曲线

                7）steps    逐帧动画

        5、animation-iteration-count    播放次数

                value/infinite（无限播放）

        6、animation-direction    播放方向

                normal（从头播放）/alternate（偶数次反向播放）

        7、元素：hover Canimation-play-state：paused    鼠标经过时暂停  

        8、animation-fill-mode    控制开始和结束的位置

                backwards    开始位置        beyframes    定义的第一帧

                forwards       结束位置        beyframes    定义的最后一帧

                延迟时间可以给负值，表示提前

 

转换    transform

1、transform

        1）translate    平移，默认沿x轴，单位时像素

        2）translate-X    x轴，正值往右，负值往左

        3）translate-y    y轴，正值往上，负值往下

        4）translate-z    z轴，正值顺时针，负值逆时针

        简写

            transform：translateX（30px） translateY（30px） translateZ（30px）或者    transform：translate3d（30px，30px，30px）

 

2、rotate    旋转，单位是deg，默认绕z轴顺时针转

        1）rotateX    正值元素wangli，负值元素往外

        2）rotateY    正值逆时针，负值顺时针

        在2D平面时，当x轴和y轴转到90度的倍数时，元素看不见

        当转到90度时，x轴和y轴会调换位置

 

3、scale    缩放    默认是1，可以给负值，表示先旋转180度，在和默认值比较

        scale>1，表示从中心开始整体放大

        scale<1，表示从中心开始整体缩小

        只给一个value时，宽和高同时放大缩小

 

4、skew    倾斜，单位是deg，默认x轴倾斜，且没有z轴属性

 

5、transform-origin    转换的起点（基点）

        属性值可以是方向或者像素，且可以为负数

        当立方体的中心是基点时，x轴和y轴可以用center，但z轴必须用像素

 

6、backface-visibility    元素旋转时，背面是否可见

        1）visible    默认可见

        2）hidden    不可见，只给背面的元素加

        

7、perspective    景深    数越小，看到的越大，反之相反    景深加给父元素

 

8、transform-style：perserve-3d    与景深一起使用

 

9、perspective-orgin

        景深的基，可以给方向值，也可以给像素

        且必须和景深写在一个元素样式中，不能分开