尝试无限循环复杂的css动画（边框围绕圆的边缘运行）

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

我想让这个循环无限地作为加载状态。现在，我可以让所描述的行为运行一次。我一直坚持让它循环，这意味着蓝色边框在它消失后再次返回，等等。该代码段包含在演示中-

正文{
填充：0；
保证金：0；
}
.外，.内，.盖{
边界半径：50%；
高度：200px；
宽度：200px；
框大小：边框框；
}
.外部{
背景：线性渐变（向右，透明0%，透明50%，#7db9e8 50%，#7db9e8 100%）；
位置：绝对位置；
排名：0；
}
.outer.opp{
背景：线性梯度（向右，#7db9e8 0%，#7db9e8 50%，透明50%，透明100%）；
}
.内部{
背景：线性梯度（向右，透明0%，透明50%，#ccc 50%，#ccc 100%）；
填充物：5px；
-webkit动画：直线向前旋转5s 2s；
}
.inner.opp{
背景：线性梯度（向右，#ccc 0%，#ccc 50%，透明50%，透明100%）；
-webkit动画：旋转2 5s 7s线性向前；
}
.掩护{
背景：#ccc；
高度：190px；
宽度：190px；
位置：绝对位置；
顶部：5px；
左：5px；
z指数：5；
}
img{
左边距：35px；
边缘顶部：45像素；
}
@-webkit关键帧旋转{
0% {
-webkit变换：旋转（0）；
}
99.99% {
背景：线性梯度（向右，透明0%，透明50%，#ccc 50%，#ccc 100%）；
}
100% {
-webkit变换：旋转（-180度）；
背景：线性渐变（向右，透明0%，透明50%，透明50%，透明100%）；
}
}
@-webkit关键帧spin2{
0% {
-webkit变换：旋转（0）；
}
99.99% {
背景：线性梯度（向右，#ccc 0%，#ccc 50%，透明50%，透明100%）；
}
100% {
背景：线性渐变（向右，透明0%，透明50%，透明50%，透明100%）；
-webkit变换：旋转（-180度）；
}
}
/******启动灰色边框动画的css*******/
格雷先生{
不透明度：0；
-webkit动画：向前显示0秒12秒；
位置：绝对位置；
顶部：0px；
}
灰色，外面的{
背景：线性梯度（向右，透明0%，透明50%，#ccc 50%，#ccc 100%）；
}
.gray.outer.opp{
背景：线性梯度（向右，#ccc0%，#ccc50%，透明50%，透明100%）；
}
格雷，内线{
背景：线性渐变（向右，透明0%，透明50%，#7db9e8 50%，#7db9e8 100%）；
-webkit动画：旋转灰色5s 12s线性向前；
}
.gray.inner.opp{
背景：线性梯度（向右，#7db9e8 0%，#7db9e8 50%，#ccc 50%，#ccc 100%）；
-webkit动画：自旋灰度2 5s 17s线性向前；
}
@-出现webkit关键帧{
0% {
不透明度：0；
}
100% {
不透明度：1；
}
}
@-webkit关键帧旋转为灰色{
0% {
-webkit变换：旋转（0）；
}
99.99% {
背景：线性渐变（向右，透明0%，透明50%，#7db9e8 50%，#7db9e8 100%）；
}
100% {
-webkit变换：旋转（-180度）；
背景：线性渐变（向右，透明0%，透明50%，透明50%，透明100%）；
}
}
@-webkit关键帧自旋灰度2{
0% {
-webkit变换：旋转（0）；
}
100% {
-webkit变换：旋转（-180度）；
}
}

---

找到了答案。使用两个剪裁的div覆盖要显示的div。在剪裁的div中是一个带圆角的单div。每个都与循环动画相关联。一个被延迟以模拟单个无缝效果。这不是一个完美的解决方案，因为蓝色在灰色的圆圈外窥视一点，但也不错

但是，IE、FF和Android 4的某些版本不支持此剪辑属性。叹息

。蓝色圆圈{
背景：蓝色；
边界半径：50%；
高度：150像素；
位置：相对位置；
宽度：150px；
}
.掩护{
背景：浅灰色；
边界半径：50%；
高度：130像素；
左：0；
保证金：自动；
位置：绝对位置；
右：0；
顶部：10px；
宽度：130px；
}
.左半部，.右半部{
身高：100%；
显示：内联块；
溢出：隐藏；
宽度：50%；
}
.左半{
左：0；
}
.左半圆{
背景：浅灰色；
边界半径：50%；
身高：100%；
宽度：200%；
-webkit剪辑路径：多边形（50%0,0,0,100,50%100%）；
剪辑路径：多边形（50%0，0.0，0.100%，50%100%）；
-webkit动画：旋转半圆16s 4s线性无限；
-webkit转换：translatez（0）；
}
.右半{
位置：相对位置；
}
.右半圈{
背景：浅灰色；
边界半径：50%；
身高：100%；
位置：绝对位置；
右：0；
宽度：200%；
-webkit剪辑路径：多边形（100%0、50%0、50%100%、100%100%）；
剪辑路径：多边形（100%0，50%0，50%100%，100%100%）；
-webkit动画：向前旋转半圆16s 0s线性无限；
-webkit转换：translatez（0）；
}
@-webkit关键帧旋转半圈{
0% {
-webkit变换：旋转（0度）；
}
25% {
-webkit变换：旋转（180度）；
}
50% {
-webkit变换：旋转（180度）；
}
75% {
-webkit变换：旋转（360度）；
}
100% {
-webkit变换：旋转（360度）；
}
}