Intertial rotating animation

index.html

<div class="box">
   <div class="star"></div> 
</div>

Intertial-rotating-animation.markdown

Intertial rotating animation

Adding an inertia effect to a rotation transform

A Pen by victordg on CodePen.

License.

style.scss

.box {
  margin: 0 auto;
  position: relative;
  top: 200px;
  width: 100px;
  height: 100px;
  transform: rotateZ(0);
  transition: all 900ms ease-out;
  cursor: pointer;
}

.box:hover {
  transform: rotateZ(-60deg);
}

.star {
  position: relative;
  width: 100px;
  height: 100px;
  background: url(https://cldup.com/HeqDhxgwV2.png) center no-repeat;
  background-size: 100px 100px;
  animation-name: spin;
  animation-duration: 2000ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

.box:hover .star {
  animation-play-state: running;
}

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