Advanced Features

CSS Animations

Multi-step keyframe animations that run automatically.

1Defining @keyframes

Name a sequence and describe the property values at each step.

Example Code

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

Use the animation shorthand: name, duration, easing, delay, iteration, direction, fill-mode.

Example Code

.hero {
  animation: fadeInUp 0.6s ease-out both;
}

Use infinite for continuous animations like spinners and pulses.

Example Code

@keyframes spin {
  to { transform: rotate(360deg); }
}
.loader { animation: spin 1s linear infinite; }

Finished reading?

Mark this topic as complete to track progress.