Animations

Master CSS animations to create complex, multi-step visual effects using @keyframes and the animation shorthand property.

What it is

CSS Animations allow you to change the style of an element over time. Unlike transitions, which require a state change (like hover) to trigger, animations run automatically or can be triggered by class changes. The core mechanism is the @keyframes rule, which defines the intermediate steps of the animation. You then apply this animation to an element using the animation property. Key terms include duration, timing function, iteration count, and fill mode.

Why it matters

• Complex Sequences: Allows for multi-stage movements that are impossible with simple transitions.
• Performance: Runs on the GPU for properties like transform and opacity, ensuring smooth frame rates.
• Reusability: Define once in @keyframes, apply to many elements with different durations or delays.
• Control: Precise control over when an animation starts, stops, loops, or holds its final state.

Syntax or steps

1. Define the animation sequence using @keyframes name { ... }. Use percentages (0%, 50%, 100%) or keywords (from, to) to specify styles at specific points in time. 2. Apply the animation to an element using the animation shorthand: animation: name duration timing-function delay iteration-count direction fill-mode;. 3. Ensure the element has dimensions and visibility if animating layout properties, though transform is preferred for motion.

Example

<style>
@keyframes bounceIn {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.2); opacity: 1; }
  80% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  /* Shorthand: name duration timing-function delay iteration-count fill-mode */
  animation: bounceIn 1s ease-out 0s 1 both;
}
</style>

<div class="box"></div>

Explanation: The @keyframes bounceIn block defines four stages. At 0%, the box is invisible and scaled down. By 60%, it overshoots slightly while becoming visible. It settles back at 80% before reaching normal size at 100%. The .box selector applies this animation. The both value in fill-mode ensures the element retains the styles from the first keyframe before the animation starts and the last keyframe after it ends.

Common mistakes

• Forgetting Fill Mode: Without both or forwards, the element snaps back to its original state immediately after the animation finishes.
• Animating Layout Properties: Changing width, height, or top/left causes reflows and poor performance. Use transform: translate() or scale() instead.
• Missing Vendor Prefixes: While modern browsers support standard syntax, older environments may need -webkit- prefixes for @keyframes and animation.
• Confusing Transitions with Animations: Transitions need a trigger (like :hover). If nothing triggers the change, use an animation instead.

When to use it

Compare CSS Animations with CSS Transitions to choose the right tool.

Feature	CSS Transition	CSS Animation
Trigger	State change (e.g., hover, focus)	Automatic or class toggle
Steps	Start and End only	Multiple intermediate steps
Looping	No native looping	Yes (infinite)
Best For	Simple UI feedback	Complex sequences, loaders, entrances

Practice

Guided Exercise: Create a "pulse" effect where a circle grows and shrinks repeatedly. Use @keyframes pulse with transform: scale(1) at 0% and 100%, and transform: scale(1.5) at 50%. Apply it with animation: pulse 2s infinite;. Challenge: Modify the previous exercise so the pulse slows down as it reaches the maximum size. Hint: Change the timing function to ease-in-out.

Quick check

Question: What does the both keyword do in the animation-fill-mode property? Answer: It applies the styles from the first keyframe before the animation begins and the styles from the last keyframe after the animation ends.

Summary

CSS animations provide powerful control over multi-step visual changes using @keyframes. Always prefer transform and opacity for performance, and use fill-mode to manage the element's state before and after the animation runs.