html边框环绕一周动画,尝试无限循环复杂的css动画(边框围绕圆的边缘运行)

我正在尝试创建一个无限动画,其中围绕圆圈的新笔划围绕圆周运行.最初笔划是蓝色,然后当它达到360度时,它似乎在同一方向上消失.但实质上,类似的动画正在另一组元素上运行,其中颜色反转.

我想把这个循环无限地作为一个加载状态.现在我可以让所描述的行为运行一次.我坚持让它循环,这意味着蓝色边框在消失后再次返回等等.小片包含在演示中 –

body {

padding: 0;

margin: 0;

}

.outer, .inner, .cover {

border-radius: 50%;

height: 200px;

width: 200px;

box-sizing: border-box;

}

.outer {

background: linear-gradient(to right, transparent 0%, transparent 50%, #7db9e8 50%, #7db9e8 100%);

position: absolute;

top: 0;

}

.outer.opp {

background: linear-gradient(to right, #7db9e8 0%, #7db9e8 50%, transparent 50%, transparent 100%);

}

.inner {

background: linear-gradient(to right, transparent 0%, transparent 50%, #ccc 50%, #ccc 100%);

padding: 5px;

-webkit-animation: spin 5s 2s linear forwards;