Keyframe Animations

@keyframes + animation

@keyframes name { 0% {...} 100% {...} } defines the steps; animation: name duration timing-function plays it. Unlike transition, it can loop and doesn't need a trigger like :hover.

A spinning loader

infinite repeats the animation forever; linear gives constant speed.

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

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

Animate cheap properties

Stick to animating transform and opacity — they run on the GPU. Animating width, height, or top/left forces the browser to recalculate layout on every frame, which can feel janky.