css - 试图无限循环复杂的 css 动画(边框围绕圆的边缘运行)

Question

我正在尝试创建一个无限动画，其中围绕圆的新笔划围绕圆周运行。笔划最初是蓝色的，然后当它达到 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;
}

.inner.opp {
  background: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%, transparent 100%);
  -webkit-animation: spin2 5s 7s linear forwards;
}

.cover {
  background: #ccc;
  height: 190px;
  width: 190px;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 5;
}

img {
  margin-left: 35px;
  margin-top: 45px;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0);
  }
  99.99% {
    background: linear-gradient(to right, transparent 0%, transparent 50%, #ccc 50%, #ccc 100%);
  }
  100% {
    -webkit-transform: rotate(-180deg);
    background: linear-gradient(to right, transparent 0%, transparent 50%, transparent 50%, transparent 100%);
  }
}

@-webkit-keyframes spin2 {
  0% {
    -webkit-transform: rotate(0);
  }
  99.99% {
    background: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%, transparent 100%);
  }
  100% {
    background: linear-gradient(to right, transparent 0%, transparent 50%, transparent 50%, transparent 100%);
    -webkit-transform: rotate(-180deg);
  }
}

/****** Start css for gray border animation *******/

.gray {
  opacity: 0;
  -webkit-animation: appear 0s 12s forwards;
  position: absolute;
  top: 0px;
}

.gray .outer {
  background: linear-gradient(to right, transparent 0%, transparent 50%, #ccc 50%, #ccc 100%);
}

.gray .outer.opp {
  background: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50, transparent 100%);
}

.gray .inner {
  background: linear-gradient(to right, transparent 0%, transparent 50%, #7db9e8 50%, #7db9e8 100%);
  -webkit-animation: spin-gray 5s 12s linear forwards;
}

.gray .inner.opp {
  background: linear-gradient(to right, #7db9e8 0%, #7db9e8 50%, #ccc 50%, #ccc 100%);
  -webkit-animation: spin-gray2 5s 17s linear forwards;
}

@-webkit-keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes spin-gray {
  0% {
    -webkit-transform: rotate(0);
  }
  99.99% {
    background: linear-gradient(to right, transparent 0%, transparent 50%, #7db9e8 50%, #7db9e8 100%);
  }
  100% {
    -webkit-transform: rotate(-180deg);
    background: linear-gradient(to right, transparent 0%, transparent 50%, transparent 50%, transparent 100%);
  }
}

@-webkit-keyframes spin-gray2 {
  0% {
    -webkit-transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(-180deg);
  }
}

<div class="opp outer">
  <div class="opp inner">
  </div>
</div>
<div class="outer">
  <div class="inner">
  </div>
</div>

<div class="gray">
  <div class="opp outer">
    <div class="opp inner">
    </div>
  </div>
  <div class="outer">
    <div class="inner">
    </div>
  </div>
</div>

<div class="cover">
<img src="http://media.giphy.com/media/aHKpXstxvNf56/giphy.gif" height="90"></div>

Answer 1

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

但是这个裁剪属性在IE、FF和Android 4的部分版本中是不支持的。叹息

.blue-circle {
  background: blue;
  border-radius: 50%;
  height: 150px;
  position: relative;
  width: 150px;
}

.cover {
  background: lightgray;
  border-radius: 50%;
  height: 130px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 10px;
  width: 130px;
}

.left-half, .right-half {
  height: 100%;
  display: inline-block;
  overflow: hidden;
  width: 50%;
}

.left-half {
  left: 0;
}

.left-half-circle {
  background: lightgray;
  border-radius: 50%;
  height: 100%;
  width: 200%;
  -webkit-clip-path: polygon(50% 0, 0 0, 0 100%, 50% 100%);
  clip-path: polygon(50% 0, 0 0, 0 100%, 50% 100%);
  -webkit-animation: rotate-half-circle 16s 4s linear infinite;
  -webkit-transform: translatez(0);
}

.right-half {
  position: relative;
}

.right-half-circle {
  background: lightgray;
  border-radius: 50%;
  height: 100%;
  position: absolute;
  right: 0;
  width: 200%;
  -webkit-clip-path: polygon(100% 0, 50% 0, 50% 100%, 100% 100%);
  clip-path: polygon(100% 0, 50% 0, 50% 100%, 100% 100%);
  -webkit-animation: rotate-half-circle 16s 0s linear infinite forwards;
  -webkit-transform: translatez(0);
}

@-webkit-keyframes rotate-half-circle {
  0% {
    -webkit-transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(180deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  75% {
    -webkit-transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

<div class="blue-circle">
  <div class="left-half">
    <div class="left-half-circle">
    </div>
  </div><!--
  --><div class="right-half">
    <div class="right-half-circle">
    </div>
  </div>
  <div class="cover-wrapper">
    <div class="cover">
      <img src="http://media.giphy.com/media/aHKpXstxvNf56/giphy.gif" height="90" style="margin-top:15px;">
    </div>
  </div>
</div>