css - CSS背景位置动画无限

Question

如何在按钮上添加类似进度条的动画？

当loading类被添加到按钮时，背景位置应该在无限循环中向右移动。就像一个进度条加载

这里的问题是位置以不同的速度移动

代码

<button class="loading">Loooong text on button</button><br><br>
<button class="loading">Short</button>

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

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

小提琴

http://jsfiddle.net/KP2W4/

Answer 1

您只需要一个在 x 轴上移动背景图像的关键帧动画，如下所示：

@keyframes loading{
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -100% 0;
    }
}

jsFiddle