CSS的2D变化，CSS动画

css2D变换和过渡

transform：

1.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数，不可为负值

2.移动 translate(x, y) 可以改变元素的位置，x、y可为负值；

x 在水平方向移动。

y 在垂直方向移动。

3.旋转 rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针；

过渡(transition)：

transition:param1 param2

param1 要过渡的属性

param2 过渡的时间.

transition-property设置过渡属性

transition-duration设置过渡时间

transition-timing-function设置过渡速度 用来控制速度linear(匀速)

ease-in ( 加速)

transition-delay设置过渡延时 超过时间后执行动画.

CSS动画

transform：

rotateX(30deg) 绕着x旋转30deg
rotateY(30deg) 绕着y旋转30deg
rotateZ(30deg) 绕着z旋转30deg
translateX(30px) 沿着x轴移动30px
translatey(30px) 沿着y轴移动30px
translatez(30px) 沿着Z轴移动30px( 必须给父盒子加透视)

anmition：

@keyframes 动画名{
    0%{
     }

    100%{

    }

    或者
    from{}
    to{}
}

动画调用：
    animation: 动画名称 动画时间  执行次数  运动曲线 延迟执行 结束后状态 是否反向；
        infinite: 无限次
        alternate: 反向执行
        forwards: 保持结束后的状态
        backwards: 保持动起开始前的状态
        steps(5): 让动画分步执行；

        动画详细属性：
            animation-name:动画名称
            animation-duration:持续时间
            animation-iteration-count:执行次数
            animation-timing-function:运动曲线
            animation-fill-mode:结束状态
            animation-direction: 动画方向
            animation-delay: 延迟时间