Bird
Raised Fist0
CSSmarkup~5 mins

Keyframe animations in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Keyframe animations let you create smooth changes in how things look on a webpage over time. They help make websites feel alive and interesting.

To make a button gently change color when hovered over.
To move an image across the screen smoothly.
To create a loading spinner that rotates continuously.
To fade text in and out for attention.
To animate a menu sliding in from the side.
Syntax
CSS
@keyframes animation-name {
  0% { /* styles at start */ }
  50% { /* styles halfway */ }
  100% { /* styles at end */ }
}

selector {
  animation-name: animation-name;
  animation-duration: time;
  animation-iteration-count: number | infinite;
  animation-timing-function: easing;
}

The @keyframes rule defines the animation steps.

Use percentages (0% to 100%) to set styles at different times.

Examples
This animation fades an element from invisible to visible over 2 seconds.
CSS
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.box {
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
This moves a button 100 pixels to the right and back repeatedly.
CSS
@keyframes slideRight {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

.button {
  animation-name: slideRight;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
Sample Program

This webpage shows a square box that smoothly changes its background color from light blue to light green and back continuously. The animation uses keyframes to define the color steps and CSS properties to control timing and repetition.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Keyframe Animation Example</title>
  <style>
    @keyframes colorChange {
      0% { background-color: lightblue; }
      50% { background-color: lightgreen; }
      100% { background-color: lightblue; }
    }

    .animated-box {
      width: 150px;
      height: 150px;
      background-color: lightblue;
      animation-name: colorChange;
      animation-duration: 4s;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
      border-radius: 1rem;
      margin: 2rem auto;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: sans-serif;
      color: #333;
      font-weight: bold;
      user-select: none;
    }
  </style>
</head>
<body>
  <main>
    <section>
      <div class="animated-box" aria-label="Box that changes color smoothly">
        Watch me change!
      </div>
    </section>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Always use animation-fill-mode: forwards; if you want the animation to keep the last style after finishing.

Use animation-iteration-count: infinite; to repeat animations endlessly.

Test animations in your browser's developer tools to adjust timing and effects easily.

Summary

Keyframe animations let you change styles smoothly over time.

Define steps with @keyframes and apply with CSS animation properties.

Use animations to make websites more engaging and interactive.

Practice

(1/5)
1. What does the @keyframes rule do in CSS animations?
easy
A. Stops the animation immediately
B. Applies the animation to an HTML element
C. Sets the animation duration and delay
D. Defines the stages of an animation with style changes over time

Solution

  1. Step 1: Understand the role of @keyframes

    The @keyframes rule defines how styles change at different points during the animation timeline.

  2. Step 2: Differentiate from animation properties

    Properties like animation-duration or animation-name apply the animation, but @keyframes sets the actual style changes.

  3. Final Answer:

    Defines the stages of an animation with style changes over time -> Option D

  4. Quick Check:

    @keyframes defines animation steps [OK]
Hint: Remember: @keyframes sets animation steps [OK]
Common Mistakes:
  • Confusing @keyframes with animation properties
  • Thinking @keyframes applies animation to elements
  • Mixing up animation duration with keyframe definitions
2. Which of the following is the correct syntax to define a simple keyframe animation named fade that changes opacity from 0 to 1?
easy
A. @keyframe fade { start { opacity: 0; } end { opacity: 1; } }
B. @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
C. @animation fade { 0% { opacity: 0; } 100% { opacity: 1; } }
D. @keyframes fade { 0 { opacity: 0; } 1 { opacity: 1; } }

Solution

  1. Step 1: Recall correct @keyframes syntax

    The correct rule is @keyframes followed by the animation name and curly braces containing percentage or keyword steps.

  2. Step 2: Check the step keywords and values

    Valid steps are from and to or percentages like 0% and 100%. @keyframes fade { from { opacity: 0; } to { opacity: 1; } } uses from and to correctly.

  3. Final Answer:

    @keyframes fade { from { opacity: 0; } to { opacity: 1; } } -> Option B

  4. Quick Check:

    Correct @keyframes syntax uses from and to [OK]
Hint: Use @keyframes with from/to or 0%/100% [OK]
Common Mistakes:
  • Using @animation instead of @keyframes
  • Using invalid step names like start or end
  • Omitting percentage signs or keywords in steps
3. Given the CSS below, what will happen to the <div> element when the page loads?
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: slide 2s forwards;
}

@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(200px); }
}
medium
A. The div moves 200px to the right over 2 seconds and stays there
B. The div moves 200px to the right instantly with no animation
C. The div moves 200px to the left over 2 seconds and returns
D. The div does not move because animation is missing

Solution

  1. Step 1: Analyze the animation properties

    The div has an animation named slide that lasts 2 seconds and uses forwards fill mode, meaning it keeps the final state.

  2. Step 2: Understand the keyframe effect

    The slide animation moves the div from translateX(0) to translateX(200px), which moves it 200 pixels to the right.

  3. Final Answer:

    The div moves 200px to the right over 2 seconds and stays there -> Option A

  4. Quick Check:

    Animation moves right 200px and stays [OK]
Hint: Check animation duration and fill mode for final position [OK]
Common Mistakes:
  • Confusing direction of translateX (right vs left)
  • Ignoring the forwards fill mode effect
  • Thinking animation happens instantly without duration
4. Identify the error in this CSS animation code:
@keyframes grow {
  0% { width: 100px; }
  100% { width: 200px }
}

.box {
  animation-name: grow;
  animation-duration: 3s;
  animation-iteration-count: infinite
}
medium
A. Missing semicolon after width: 200px in keyframes
B. Incorrect animation property name; should be animation
C. Animation duration must be in milliseconds, not seconds
D. Missing @keyframes keyword

Solution

  1. Step 1: Check syntax inside @keyframes

    Each CSS declaration must end with a semicolon. The width: 200px line is missing a semicolon.

  2. Step 2: Verify animation properties

    The properties animation-name, animation-duration, and animation-iteration-count are correct and properly used.

  3. Final Answer:

    Missing semicolon after width: 200px in keyframes -> Option A

  4. Quick Check:

    CSS declarations need semicolons [OK]
Hint: Always end CSS declarations with semicolons [OK]
Common Mistakes:
  • Omitting semicolons inside keyframes
  • Confusing animation property names
  • Using wrong units for duration
5. You want to create a bouncing ball effect using keyframe animations. Which keyframe sequence best simulates a ball dropping and bouncing back up smoothly?
hard
A. @keyframes bounce { 0% { transform: translateX(0); } 50% { transform: translateX(100px); } 100% { transform: translateX(0); } }
B. @keyframes bounce { 0% { transform: translateY(100px); } 50% { transform: translateY(0); } 100% { transform: translateY(100px); } }
C. @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(100px); } }
D. @keyframes bounce { 0% { transform: translateY(0); } 50% { transform: translateY(-100px); } 100% { transform: translateY(0); } }

Solution

  1. Step 1: Understand bounce motion direction

    A bouncing ball moves down (positive Y) then back up (to zero). So translateY should go from 0 to positive value and back.

  2. Step 2: Analyze each option's keyframes

    @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(100px); } } moves from 0 to 100px down at 50% and back to 0 at 100%, simulating a bounce. @keyframes bounce { 0% { transform: translateY(100px); } 50% { transform: translateY(0); } 100% { transform: translateY(100px); } } starts at 100px down, which is unnatural. @keyframes bounce { 0% { transform: translateY(0); } 50% { transform: translateY(-100px); } 100% { transform: translateY(0); } } moves up (-100px), not down. @keyframes bounce { 0% { transform: translateX(0); } 50% { transform: translateX(100px); } 100% { transform: translateX(0); } } moves horizontally, not vertically.

  3. Final Answer:

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

  4. Quick Check:

    Bounce moves down then up vertically [OK]
Hint: Bounce means down (positive Y) then back up (zero) [OK]
Common Mistakes:
  • Using negative translateY for bounce down
  • Animating horizontal movement instead of vertical
  • Starting animation at the bottom position