css变化以及动画播放

形变 transform ： 位移 缩放 旋转 参照点
位移：
translateX() : X 轴平移
translateY() : Y轴的平移
translate() : 平移
1个数 -- X轴平移
2个数 -- X轴Y轴同时平移

    缩放
        scaleX() : X轴缩放
        scaleY() : Y轴的缩放
        scale() :  缩放
            1个数 --- X轴Y轴同时缩放
            2个数 --- X轴Y轴对应缩放

    旋转：
            rotate() : 旋转， 单位：角度deg

          
    transform-origin:  形变的参照点
            关键字：
                left center right
                top center bottom
                1个关键字  默认被省略的为center
                2个关键字  

            百分数   
            像素点   

    transform: 形变函数;
    transform:scale(2);
    transform:rotate(360deg);

    transform:scale(2) rotate(360deg);

@keyframes 动画片段的名称{
进度{样式}
0%,100%{left:0; top:0;background-color:white;}
32%{left:200px;top:100px;background-color:green;}
100%{left:0; top:0;background-color:red;}
}

        播放动画 : animation
                animation-name : 动画名称
                animation-duration:一次动画播放的时间
                animation-delay : 延迟动画时间
                animation-timing-function : 动画播放的速度函数
                animation-iteration-count : 
                    N -- 播放的次数
                    infinite -- 播放无数次、
                animation-direction : 动画播放的方向
                    normal --- 正向
                    reverse ----  反向播放
                    alternate ----  正向->反向->正向-反向
                    alternate-reverse 反向->正向-反向-正向

        animation:name duration timing-function delay iteration-count direction;
            name duration 不能省略， 其他可视情况省略
            duration  delay :