[ CSS ] animation

仅供快速参考，如果想详细了解相关内容，请参阅阮老师的博客 ：
http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html

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