Geek Answers Handbook

Tries to loop endlessly complex css animations (border runs along the edge of a circle)

I am trying to create an endless animation in which a new stroke runs around a circle. The initial strike is blue, then when it reaches 360 degrees, it disappears in the same direction. But, essentially, such an animation works on another group of elements in which colors change.

I want this loop to be infinite, like a load state. Right now I can get the behavior described to work once. I got stuck on the fact that this is a cycle, meaning that the blue border returns again after its disappearance and so on. The snippet is included as a demonstration -

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>
Run codeHide result
+4
source share
1 answer

. div, div, . divs 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>
Hide result
+1

More articles:


All Articles