css动画

transform-origin:      改变元素中心点位置

2D
transform:translate(200px(向右移),200px(向下移))    相对于自身平移(如果是50%则是相对于自身大小平移自身长度50%的量)      rotate(180deg)   顺时针旋转    scale(0.5(宽),2(高))   缩小/放大   skew(50deg(x轴),50deg(y轴))    旋转


3D
transform:rotateX(50deg)    相对于x轴向后转
                  rotateY(50deg)   相对于y轴向左转


过渡
div{
transition:width 2s,height 2s,transfrom 2s；    发生的时间   
transition-delay:2s    延时执行
}
div:hover{
width:200px；  
height:200px；
transfrom:rotate(360deg)；
}

加载动画(循环动画)
div{
animation:名称 5s  infinite(来回循环播放) alternate；
}
@keyframes 名称{
    from{
        transform:translate(-50%,-50%)
    }
    to{
        transform:translate(-50%,-50%)
    }
    0%{bg:red；}
    50%{bg:blue；}
    ……
}