CSS动画、过渡、变形

1-CSS动画   animations

1.使用前先声明一个动画、定义关键帧

    @keyframes  自定义的名称{
        from{
            css的属性值、多个
        }
         to{
            css的属性值、多个
        }
    }

from开始，to结束.

2.在css样式中使用动画、调用

   选择器{
       animations-name:user-defined-name
       animations-duration:3s; 引入关键帧，动画的时长
       animations-iteration-count
       animations:....  速写
   }  

一些动画属性：

        animation-name: move;   动画名称为move，自定义

        animation-duration: 4s;   动画时长，默认0s

        animation-iteration-count: 3;   动画重复次数，默认1次，infinite  无限次

        animation-delay: 2s;   动画开始之前的延时，只会延时一次，自己的默认状态，默认0s

    动画交替方式：

        animation-direction: normal;    默认值  from > to

        animation-direction: reverse;  反转  to > from

        animation-direction: alternate;  交替  from-->to-->from-->to...

        animation-direction: alternate-reverse;   反转交替  to-->from-->to-->from...

        animation-fill-mode: none;   填充模式：延时、 动画结束之后：自己的状态

        animation-fill-mode: forwards;   最后一帧 

        animation-fill-mode: backwards;

        animation-fill-mode: both;   填充模式：延时使用的是第一帧，动画结束后使用的是最后一帧

        animation-timing-function: linear;    动画时长里的运动速度

      速写：

        animation:change both 3s linear 2s......    第一个时间：动画时长  第二个时间：延时

2-过渡        transition

1. 更加简单的动画，没有动画帧

div { transition:<property> <duration><timing-function><delay> }

速写形式，分别表示过渡属性，持续时间，时间曲线，过渡延迟时间

2. 需要触发（:hover）

transition-property    需要过渡的属性
            all
transition-duration    持续时间
            2s
transition-timing-function     时间曲线函数
       linear
       steps()
       easy
transition-delay: 0s;                延迟时间
       transition: property duration delay timing;

animation 与 transition 的异同点

1.animation需要先定义再使用

transition直接使用，需要搭配hover

2.animation可以同时对多个css属性值及你行动画     transition 单值

3.animation页面一加载就会生效     transition 没有效果

4.都可以搭配hover使用

3-变形        transform

1.使用

div { transform: xxx(); transform-origin:center; }

2.属性：

rotate   旋转

        rotateX (angle)--rotateY ( angle )--rotateZ ( angle )  分别绕X、Y、Z 轴旋转

skew    倾斜

        skew(ax,ay) 函数表示对元素的剪切或者扭转，ax表示水平方向的扭转，ay表示垂 直方向的扭转，也可以使用skewX(ax) 和skewY(ay)

scale   缩放

        scale() 函数能够更改元素的大小，如果两个向量的坐标是相等的，缩放是均匀的

translate    移动

        translate(tx, ty) 函数能够移动元素，tx为元素在水平方向上移动的距离，ty为元素 在垂直方向上移动的距离