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)
    }
}