CookieMan CookieMan - 5 months ago 21
CSS Question

CSS endless rotation on the Y axis

I am trying to do animation of the coin that rotates infinitely on the Y axis, but I can't quite make this work. Here's the demo: https://jsfiddle.net/kaeatjag/
As you can see it only animates once, one rotation and then starts from the beginning. How can i fix this?

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


.coin {
width: 100px;
height: 100px;
border-radius: 100px;
background: linear-gradient(to right, red 50%, black 50%);
animation: coin-rotate 1s both infinite;
}

@keyframes coin-rotate {
from {
transform: rotateY(0);
}

to {
transform: rotateY(180deg);
}
}

Answer

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>

Comments