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;
}

fiddle

http://jsfiddle.net/KP2W4/

Answer 1

您只需要一个关键帧动画，它可以像这样在 x 轴上移动背景图像:

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

jsFiddle