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/