CSS Animations & Keyframes

Learn how to create smooth CSS animations using @keyframes. From simple transitions to complex multi-step animations.

Keyframe Animations

Define animation sequences with @keyframes:

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fadeIn 1s ease-in-out;
}

animation-nameKeyframe name

animation-durationDuration

animation-timing-functionTiming function

animation-delayDelay

animation-iteration-countIteration count

animation-directionDirection

animation-fill-modeFill mode

animation-play-statePlay state

ease

Fast-slow

ease-in

Slow start

ease-out

Slow end

linear

Constant

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

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

Visually generate animation effects