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

Question

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

fiddle

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

"How to make keyframe animations in 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/