Course Outline (Part 14)

Welcome to Part 14 of the CSS Mastery & Responsive Layouts Course. In this part, we will explore Keyframe Animations & Animation Properties.

While CSS Transitions interpolate styles from state A to state B when triggered by user interaction, CSS Animations allow you to create complex, multi-stage, autonomous visual sequences. By declaring keyframe timelines, iteration bounds, fill-modes, and play-states, you can animate elements continuously without requiring JavaScript.

Chapter 91: Declaring Animation Timelines with @keyframes

To create an animation, you first write the animation timeline using the @keyframes rule:

@keyframes slide-in {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

91.1 Percentage Keyframes

For multi-stage animations, specify percentage values along a timeline from 0% to 100%:

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

Chapter 92: CSS Animation Properties

Once the keyframe timeline is defined, attach it to elements using the following properties:

  • animation-name: The name of the @keyframes rule (e.g. pulse).
  • animation-duration: Sizing timeline speed in seconds (s) or milliseconds (ms).
  • animation-timing-function: Easing curve calculations (e.g. ease-in-out, linear, cubic-bezier).
  • animation-delay: Waiting duration before the animation starts.

92.1 Iteration Control (animation-iteration-count)

Determines how many times the animation loop runs:

  • Unit integer (e.g. 3 runs the animation exactly three times).
  • infinite: Runs the animation loop continuously.

92.2 Loop Direction (animation-direction)

  • normal: Plays forwards (0% to 100%) and jumps back to 0%.
  • reverse: Plays backwards (100% to 0%).
  • alternate: Plays forwards, then plays backwards, alternating on each cycle (great for smooth loops).
  • alternate-reverse: Plays backwards, then plays forwards.

92.3 Animation Fill Modes (animation-fill-mode)

Defines what styles are applied to the element before the animation begins (during delay) or after it ends:

  • none (Default): The element returns to its pre-animation styling state.
  • forwards: The element retains the styling declarations of the final keyframe (100% or to).
  • backwards: The element applies the styling declarations of the first keyframe (0% or from) immediately during the delay wait period.
  • both: Applies both forwards and backwards styling logic.

92.4 Play States (animation-play-state)

Controls whether the animation is active or frozen:

  • running (Default) or paused (often used to pause animations on hover: animation-play-state: paused).

Chapter 93: The Animation Shorthand

You can combine all animation properties into a single shorthand declaration:

/* Syntax: animation: name duration timing-function delay iteration-count direction fill-mode; */
.badge-alert {
  animation: pulse 1.5s ease-in-out infinite alternate;
}

.intro-panel {
  animation: slide-in 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.2s 1 forwards;
}

Chapter 94: Animations Practice & Self-Check

94.1 Practice Exercises

  1. Exercise 1: Pulsing Alert Beacon: Create an alert beacon circle that glows and pulses infinitely. 
    @keyframes beacon {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}
.alert-beacon {
  width: 20px;
  height: 20px;
  background-color: #ef4444;
  border-radius: 50%;
  animation: beacon 2s infinite;
}
  2. Exercise 2: Pausing Loading Spinner: Create a rotating loading spinner that pauses when hovered. 
    @keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.spinner:hover {
  animation-play-state: paused;
}

94.2 Self-Check Questions

  1. What is the default value of animation-fill-mode?
    • Answer: none.
  2. Which keyword allows an animation to loop forever?
    • Answer: infinite.
  3. What value of animation-direction plays forwards on odd loops and backwards on even loops?
    • Answer: alternate.
  4. What does animation-fill-mode: forwards do to an element?
    • Answer: It forces the element to retain the styling states defined in the last keyframe of the animation after completion.
  5. Can you pause an animation using CSS?
    • Answer: Yes, by setting animation-play-state: paused.
  6. What keywords act as shorthands for 0% and 100% in keyframes?
    • Answer: from (0%) and to (100%).
  7. Is it possible to declare multiple animations on a single element?
    • Answer: Yes, separate them with a comma (e.g. animation: spin 1s, fade 2s).
  8. Why does animation-fill-mode: backwards apply styles during the delay period?
    • Answer: It ensures the element matches the animation’s starting frames immediately, avoiding sudden visual jumps when the delay timer ends.
  9. What is the performance benefit of using CSS keyframes over JS interval animations?
    • Answer: CSS animations allow the browser to offload rendering tasks to the GPU and optimize animation loops under the compositor process, preventing UI thread blockages.
  10. Does changing the visual order of keyframe percentages (e.g. writing 100% before 50%) break the animation?
    • Answer: No, the rendering engine sorts keyframes numerically by percentage timeline before executing them.

Discussion

Loading comments...