0Pricing
CSS Academy · Lesson

@keyframes Syntax and Animation Property

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

@keyframes Syntax and Animation Property is a free CSS Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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); }
}

The animation Property

Apply an animation to an element using the animation shorthand or its sub-properties:

.hero-text {
  animation: fadeIn 600ms ease-out forwards;
  /* name | duration | easing | fill-mode */
}

animation-name

References the @keyframes rule by name:

.spinner {
  animation-name: rotate;
}

animation-duration

Sets how long one cycle of the animation takes:

.pulse { animation-duration: 1.5s; }

Multiple Animation Steps

Use percentage keyframes for complex multi-step animations:

@keyframes slideDown {
  0%   { transform: translateY(-100%); opacity: 0; }
  60%  { transform: translateY(10px); opacity: 1; }
  80%  { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

Animating Multiple Properties

Each keyframe step can animate multiple properties simultaneously:

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
    animation-timing-function: ease-in;
  }
  50% {
    transform: translateY(-30px);
    animation-timing-function: ease-out;
  }
}

animation-timing-function per Keyframe

The timing function can be set per keyframe step, controlling easing between individual waypoints rather than the whole animation.

Multiple Animations

Apply multiple animations to one element using comma-separated values:

.element {
  animation:
    fadeIn  500ms ease-out forwards,
    wobble  300ms ease-in 500ms;
}

animation-play-state

Pause and resume animations dynamically:

.card:hover .spinner {
  animation-play-state: paused;
}

CSS Animation vs Transition Summary

Choose wisely:

  • Transition: two states, triggered by state change, simple
  • Animation: multi-step, self-starting, looping, more control

Quick Check

Which @keyframes keyword represents the animation's start state?

Recap

Define animation steps with @keyframes using from/to or percentage waypoints. Apply with the animation shorthand specifying name, duration, timing, and fill-mode. Multiple animations are comma-separated. Use transitions for simple two-state changes and animations for complex sequences.

Frequently asked questions

Is the “@keyframes Syntax and Animation Property” lesson free?

Yes — the full text of “@keyframes Syntax and Animation Property” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “@keyframes Syntax and Animation Property”?

Define animation steps with @keyframes and apply them using the animation shorthand. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “@keyframes Syntax and Animation Property” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

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