CSS3动画规则

之前对css动画的理解有点死记硬背的意思，很容易忘记，今天重新梳理一下脉络，更方便记忆。

 

首先，了解transform，他可以给元素添加一些特殊的位移，形变，放缩等功能，也就是这一步，为css3动画实现打下了基础。

/* 2D、3D的转换 */
div{
    transform: translate(10px);
    transform: rotate(30deg);
    ...
    animation: move 3s;
}

为什么这么说呢，css3动画animation是按照帧率来实现的，通过固定整个过程某几个帧的样式，按照指定的动画函数来运动，从而实现动画

@keyframes move {
    from{
        transform: translateX(-200px)
    }
    to {
        transform: translateX(200px)
    }
}