CSS Endless Rotation Animation

CSS endless rotation animation

Works in all modern browsers

.rotate{
 animation: loading 3s linear infinite;
 @keyframes loading {
  0% { 
    transform: rotate(0); 
  }
  100% { 
    transform: rotate(360deg);
  }
 }
}

Infinite rotation animation using CSS and Javascript

Endless rotation - CSS3 Animation property and Keyframes:

@keyframes rotate360 {
  to { transform: rotate(360deg); }
}
img { animation: 2s rotate360 infinite linear; }

<img src="https://i.stack.imgur.com/qCWYU.jpg?s=64&g=1" />

CSS endless rotation on the Y axis

Just add an extra frame to the animation and bring it back to original state.

Transform from 0% (0deg) -> 50% (180deg) -> 100% (0/360deg)

Note: Adjust the animation duration as per your need

Updated fiddle

.coin {  width: 100px;  height: 100px;  border-radius: 100px;  background: linear-gradient(to right, red 50%, black 50%);  animation: coin-rotate 2s both infinite;}@keyframes coin-rotate {  0 {    transform: rotateY(0);  }  50% {    transform: rotateY(180deg);  }  100% {    transform: rotateY(0deg);  }}

<div class="coin"></div>

Pure CSS rotate animation broken while in infinite loop

First I would simplify your code and use less HTML/CSS. Then I would consider only one animation where I will have both states.

The animation will be: the first flip then we keep the first color then the second filp then we keep the second color. It's divided into 12 time slots (1 + 5 + 1 + 5) (1+5 = 6 which is the number of the divs)

If the duration is S then the delay should be multiple of one slot S/12. Notice that I have used the perspective within the transform to avoid an extra element:

#loader {  width: 240px;  height: 100px;  display: flex;  flex-wrap: wrap;}
#loader>div {  width: calc(100%/3);  position: relative;  transform-style: preserve-3d;  animation: spin 6s linear var(--delay, 0s) infinite;}
#loader>div:before,#loader>div:after {  content: "";  position: absolute;  top:0;  left:0;  width: 100%;  height: 100%;  backface-visibility: hidden;  background-color: var(--front, #db9834);}
#loader>div:after {  background-color: var(--back, #3498db);  transform: rotateY(180deg);}

/* -------------------------------------------------------- */
#loader>div:nth-child(2) {  --front: #db8834;  --back: #3488db;  --delay: 0.5s;}
#loader>div:nth-child(3) {  --front: #db7834;  --back: #3478db;  --delay: 1s;}
#loader>div:nth-child(4) {  --front: #db6834;  --back: #3468db;  --delay: 1.5s;}
#loader>div:nth-child(5) {  --front: #db5834;  --back: #3458db;  --delay: 2s;}
#loader>div:nth-child(6) {  --front: #db4834;  --back: #3448db;  --delay: 2.5s;}

@keyframes spin {  0% {    transform:perspective(500px) rotateY(0deg);  }  8.33%,  50%{    transform:perspective(500px) rotateY(180deg);  }  58.33% {    transform:perspective(500px) rotateY(0deg);  }}

<div id="loader">  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div></div>

CSS Animation to rotate element 360 degress on it self, rotates element around itself

You can spin the icon itself by giving it an id

<i id="cog" class="fas fa-cog fa"></i>

And then set the transform origin to the center

 #cog {
      transform-origin: center;
      animation-duration: 3s;
      animation-timing-function: linear;
      animation-delay: 0s;
      animation-iteration-count: infinite;
      animation-direction: normal;
      animation-fill-mode: none;
      animation-play-state: running;
      animation-name: cog-spin; 
}

How can I stop an animation without to reset the spinning rotation in CSS (example explains it best)

I think you wanted this thing it would be work

.rotatingDiv {
    width: 50px;
    height: 30px;
    background-color: red;
    margin: auto;
    margin-top: 10rem;
    cursor: pointer;
    animation: spin 4s linear infinite;
    animation-play-state: paused;
    }

    .rotatingDiv:hover {
    animation: spin 4s linear infinite;
    }

    @keyframes spin {
    0% {
     transform: rotate(0deg);
    }
    100% {
     transform: rotate(360deg);
    }
    }

<body>
    <div class="rotatingDiv"> </div>
    </body>

CSS Endless Rotation Animation