[ CSS ] animation 快速參考

僅供快速參考，如果想詳細瞭解相關內容，請參閱阮老師的部落格 ：
http://www.ruanyifeng.com/blo…

css關於動畫和變換部分有3個詞很容易混淆，分別是transform(變換), translate(平移), transition(過渡)

其中transform和translate常見於如下形式：

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

而transition用於css3的動畫，表示過渡效果

---

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的寫法

.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的寫法

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