僅供快速參考，如果想詳細(xì)了解相關(guān)內(nèi)容，請(qǐng)參閱阮老師的博客 ：
http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html

css關(guān)于動(dòng)畫(huà)和變換部分有3個(gè)詞很容易混淆，分別是transform(變換), translate(平移), transition(過(guò)渡)

其中transform和translate常見(jiàn)于如下形式：

.class
{
    transform: translate(826px);
}

而transition用于css3的動(dòng)畫(huà)，表示過(guò)渡效果

1. transition

.class1
{
    transition: duration <delay> <property> <timing-function>, an other group;
}
.complete
{
    transition-property: height;
    transition-duration: 1s;
    transition-delay: 1s;
    transition-timing-function: ease;
}

2. animation

animation的寫(xiě)法

.class1
{
    animation: duration <delay> name <timing-function> <iteration-count> <fill-mode> <direction> <step(n)>;
    animation-play-state: play-state;
}

1. duration: 1s
2. delay: 1s
3. name: name
4. timing-function: linear | ease-in | ease-out | cubic-bezier
5. iteration-count: 10 | infinite
6. fill-mode: forwards | none | backwards | both
7. direction: normal | alternate | reverse | alternate-reverse
8. step(n): step(2) | step(10)
9. play-state: running | paused

keyframe的寫(xiě)法

@keyframes rainbow
{
    0%
    { 
        background: #c00; 
    }
    50%
    { 
        background: orange; 
    }
    100%
    { 
        background: yellowgreen; 
    }
}
@keyframes rainbow
{
    from
    {
        background: #c00;
    }
    50%
    { 
        background: orange; 
    }
    to
    { 
        background: yellowgreen; 
    }
}