CSS Animations and Keyframes

Keyframe animations define a sequence of styles that the browser can play without JavaScript.

@keyframes name specifies changes at percentages or at from and to. Use animation: name 1s ease-in-out 2 to play it twice, or infinite for repeating decorative motion.

Animate transform or opacity when practical. Do not animate essential text indefinitely. Provide a prefers-reduced-motion alternative.

A keyframes rule supplies property values over time; animation controls when and how they are interpolated.

Play one soft entrance animation.

HTML

<div class="anim-chip">Saved successfully</div>

CSS

@keyframes pgcss-chip-appear { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .anim-chip { display: inline-block; padding: 12px 16px; background: #dbeafe; color: #1e40af; border-radius: 8px; animation: pgcss-chip-appear 650ms ease-out both; } @media (prefers-reduced-motion: reduce) { .anim-chip { animation: none; } }

Rendered output

Observe: The chip appears once and remains visible after completion.

Animate a short decorative pulse instead of important text.

HTML

<div class="status-row"><span class="status-dot" aria-hidden="true"></span><span>System online</span></div>

CSS

@keyframes pgcss-status-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.65); opacity: .45; } } .status-row { display: flex; align-items: center; gap: 9px; padding: 10px; } .status-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: #059669; animation: pgcss-status-pulse 1.5s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .status-dot { animation: none; } }

Rendered output

Observe: The decorative status dot pulses, but the readable status text stays still.

A keyframes rule supplies property values over time; animation controls when and how they are interpolated.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• Animation-name must match the @keyframes identifier exactly.

• Infinite motion can distract or affect users with vestibular sensitivities.

Set animation-iteration-count to 2 for the first example and identify when the effect ends.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Use keyframes to reinforce status and affordances, not to overwhelm content.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.