Keyframe Animations

What Is It?

A keyframe animation defines intermediate style states and plays them over time. Unlike a transition, it can run without a user-triggered property change.

Properties, Tags and Attributes Explained

• @keyframes: Names a sequence of style states.
• animation: Sets name, duration, timing, iteration count, and other animation options.
• animation-fill-mode: Controls whether keyframe styles apply outside the active animation interval.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Example 1: One-time entrance

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Keyframe Animations</title>
  <style>
    @keyframes enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
    .notice { padding: 16px; background: #dcfce7; animation: enter 600ms ease-out; }
    @media (prefers-reduced-motion: reduce) { .notice { animation: none; } }
  </style>
</head>
<body>
  <p class="notice">Your lesson is ready.</p>
</body>
</html>

What you see: The message fades and moves into place once. Run the example again to replay it.

Example 2: Finite pulse

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Keyframe Animations</title>
  <style>
    @keyframes pulse { 50% { transform: scale(1.08); } }
    .badge { display: inline-block; margin: 16px; padding: 16px; background: #dbeafe; animation: pulse 800ms ease-in-out 2; }
    @media (prefers-reduced-motion: reduce) { .badge { animation: none; } }
  </style>
</head>
<body>
  <span class="badge">New lesson</span>
</body>
</html>

What you see: The badge pulses twice and then stops.

When and Where to Use It

Use a short animation for useful feedback or a gentle entrance. Keep the message understandable when animation is disabled.

Common Mistake or Useful Tip

Avoid flashing effects and distracting endless motion. Respect reduced motion preferences.

Try It Yourself

Change the pulse iteration count from 2 to 1.