css - 如何在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 中制作关键帧动画”

您需要-webkit在属性上包含前缀animation：

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/