CSS颜色动画边框顶部属性

Question

我的边框顶部有一个蓝色的4像素，我想创建一个简单的动画来指示正在加载内容。

body.loading {
    border-top: 3px black solid;
}

我想要一个黑白渐变并将其移动以产生效果。我找到了一些鼠标悬停效果的示例，但在这种情况下，我希望动画仅在body.loading类中永久存在。

我找到了一个示例，但使用的是背景色而不是边框​​。 （http://jsfiddle.net/aKhjk/1/）。谢谢您的指导。

Answer 1

为bordertest类添加动画属性

 animation: loading 3s linear infinite;

以下动画的关键帧：

@keyframes loading {
from {left: 0%; width: 0;z-index:100;}
to {left: 0; width: 100%;}

}

demo