0Pricing
CSS Academy · Lesson

@keyframes Syntax and Animation Property

Define animation steps with @keyframes and apply them using the animation shorthand.

What are CSS Animations?

CSS animations allow multi-step property changes over time using @keyframes. Unlike transitions, animations start automatically or on class addition and support complex sequences.

@keyframes Syntax

Define animation steps using percentages (0% to 100%) or from/to keywords:

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

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

All lessons in this course

  1. @keyframes Syntax and Animation Property
  2. Animation Direction Fill-Mode and Iteration
  3. Chaining and Sequencing Animations
  4. Accessible Animations with prefers-reduced-motion
← Back to CSS Academy