Continuous Spin Animation with CSS rotateZ

Infinite Spin with rotateZ

A continuous rotation is achieved by animating from rotateZ(0deg) to rotateZ(360deg) with animation-iteration-count: infinite.

The CSS

@keyframes spin {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}

.spinner {
  animation: spin 1s linear infinite;
}

Timing Functions

The timing function significantly changes the feel:

Timing	Effect
linear	Constant speed — mechanical, smooth
ease-in-out	Accelerates and decelerates — organic, pulsing
cubic-bezier(0.5, 0, 0.5, 1)	Custom easing for specific motion curves

Speed Control

.slow   { animation-duration: 3s; }   /* Lazy rotation */
.normal { animation-duration: 1s; }   /* Standard spinner */
.fast   { animation-duration: 0.3s; } /* Rapid spin */

Reverse Direction

.counter-clockwise {
  animation: spin 1s linear infinite reverse;
}

Performance Consideration

Continuous rotateZ animations are highly performant because they are composited on the GPU. Unlike margin or top animations, they do not trigger layout or paint operations. However, keep the number of simultaneous spinning elements reasonable to avoid GPU memory pressure.