如何在chrome中制作关键帧动画

Question

如何在Chrome中制作关键帧动画

拨弄

http://jsfiddle.net/tPw8J/

的HTML

<button class="loading">btn</button>

的CSS

@keyframes animation_loading {
    from { background-position:0 0; }
    to { background-position:25px 0; }
}

@-webkit-keyframes animation_loading {
    from { background-position:0 0; }
    to { background-position:25px 0; }
}

button.loading {
    background-image:url(//www.dynaccount.com/button.bg-loading.png);
    animation:animation_loading 0.5s linear infinite;
}

Answer 1

  

“如何在Chrome中制作关键帧动画”

您需要在animation属性中添加-webkit前缀：

button.loading {
    background-image:url(//www.dynaccount.com/button.bg-loading.png);
    -moz-animation: animation_loading 0.5s linear infinite; /* FF 15 & below */
    -webkit-animation: animation_loading 0.5s linear infinite;
     animation: animation_loading 0.5s linear infinite;
}

http://jsfiddle.net/tPw8J/3/