CSS3复习回顾------动画

2D转化：transform

translate（x，y）：移动

rotate（度）：旋转 单位deg

scale（x，y）：伸缩  表示x huo y变化多少倍 

设置转化中心点：transform-origin（x，y） x y可以为像素，也可以为方位名词

动画转化：

 定义：

@keyframes 动画名词{

    
    0%{

        变化
}



    100%{
        变化

}

}

属性：

@keyframes  规定动画

animation-name    动画名称

animation-duration  持续时间

animation-timing-function  速度曲线   steps（）设置步长

animation-delay  延迟开始时间

animation-iteration-count  动画次数   infinite 无限

animation-diretion   是否在下一周期逆向   normal   alternate

animation-play-state      规定是否暂停， running  pause

3D转化：

        translate3D（x，y，z）

        rotate3D（x，y，z）

        perspective透视，体现z轴  写在被观察的父盒子上