Keyframes and Animations

While Transitions (P3.2) smooth the change between two states (e.g., normal and :hover), CSS Animations allow you to define a sequence of multiple styles that run automatically over a specific duration.

1. Defining an Animation Sequence (@keyframes)

The @keyframes rule is the blueprint for the animation. It defines the name of the animation and the styles that apply at various points (keyframes) along its timeline.

/* 1. Define the animation blueprint */
@keyframes slide-in {
  /* Keyframe 1: Start state */
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  
  /* Keyframe 2: Middle state */
  50% {
    opacity: 0.5;
  }

  /* Keyframe 3: End state */
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

• Percentage Markers: You use percentages (from 0% to 100%) to define the style at that specific point in the animation’s timeline.
• from and to: These keywords are aliases for 0% and 100%, respectively, often used for simple two-step animations.

2. Applying the Animation (animation Property)

Once the @keyframes rule is defined, you apply it to an HTML element using the animation property or its individual longhand properties.

A. The animation Shorthand

The shorthand is the most common way to apply an animation:

.loader-icon {
  animation: spin 1s linear infinite;
  /* (Name) (Duration) (Timing) (Count) */
}

3. Key animation Properties in Detail

A. animation-iteration-count

• infinite: Causes the animation to loop endlessly. (Essential for loaders and background effects).

B. animation-fill-mode

This is critical for controlling what happens outside of the active animation duration:

• none (Default): The element reverts to its original styles once the animation finishes.
• forwards: The element will retain the computed values from the last keyframe (100%).
• backwards: The element will apply the computed values from the first keyframe (0%) immediately, before the animation starts.

/* Example: Keep the element at its final 100% state after playing once */
.element-in {
  animation: slide-in 1.5s ease-out 1 forwards; 
}

4. Performance Considerations

Animations, especially complex ones, can be demanding. For best performance:

• Animate Optimized Properties: Only animate properties that can be handled directly by the GPU, specifically opacity and transform (translate, scale, rotate).
• Avoid Layout/Paint Changes: Avoid animating properties like width, height, margin, padding, or top/left (when position: relative), as these force the browser to recalculate the layout of surrounding elements on every frame, causing “jank.”

/* Good for performance (GPU-accelerated) */
.box {
  transform: translateX(50px);
  opacity: 0.5;
}

/* Bad for performance (CPU-intensive, causes layout reflow) */
.box {
  width: 500px;
  margin-top: 10px;
}