CSS Tip

Smoothly stop an infinite rotation

After the previous effect, here is a different way to stop an infinite rotation on hover. This time, the element will smoothly return to its initial position and the rotation will resume when you unhover.

@property --a {
  syntax: "<angle>";
  inherits: false;
  initial-value: -100turn; /* not really infinite but you get the idea */
}
@property --i {
  syntax: "<number>";
  inherits: false;
  initial-value: 1; 
}
.box {
  --t: 1turn; /* control the modulo (the smallest angle after which you get back to the same visual) */
  --d: .8s;   /* the transition on hover */
  
  rotate: calc(mod(var(--a),var(--t))*var(--i));
  transition: --i 0s,--a 200s linear;
  @starting-style {
    --a: 0turn;
  }
}
.box:hover {
  --i: 0;
  --a: 0turn;
  transition: --i var(--d) ease-out,--a 0s var(--d);
}

See the Pen Stop infinite rotation on hover by Temani Afif (@t_afif) on CodePen.

Here is another demo using the same technique. Hover the image to stop the animation smoothly.

See the Pen Glowing border with infinite animation (hover for a smooth stop) by Temani Afif (@t_afif) on CodePen.

More CSS Tips