css3 animation

让css animation 动画停在最后一帧

animation-fill-mode用来定义元素在动画结束后的样子。

animation-fill-mode 的默认值是 none，也就是在动画结束之后不做任何改动

.element
{
    animation: fadein ease-in 2s;
    animation-fill-mode: forwards;
}
 @keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

　　

循环次数

animation-iteration-count:1;

-webkit-animation-iteration-count:1;

 

n   定义播放动画多少次。 默认值为1

infinite   指定动画应该播放无限次（永远）

 

.addAnimation{
        animation:mymove .2s linear; 
        -webkit-animation:mymove .2s linear; 
        animation-iteration-count:1;
        -webkit-animation-iteration-count:1; 
        animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
    }

    @keyframes mymove{
        from {left:-100%;}
        to {left:0%;}
    }

    @-webkit-keyframes mymove /*Safari and Chrome*/
    {
        from {left:-100%;}
        to {left:0%;}
    }