CSS Tutorial 7: Transitions & Animations

Bringing your webpage to life with motion, interactions, and state changes.

Layout Review

Up until now, our webpages have been completely static. We built responsive grids and positioned elements perfectly, but they do not react when the user interacts with them. Today, we bridge the gap between static design and interactive engineering using CSS Pseudo-classes, Transitions, and Keyframe Animations.

Step 1: The Trigger (Pseudo-classes)

To make something change, we first need an event to trigger the change. In CSS, we use a Pseudo-class to define the special state of an element. The most common state is when a user's mouse pointer hovers over an element.

We attach a pseudo-class to a selector using a colon (:).

• :hover - Activates when the mouse is over the element.
• :focus - Activates when an input field is clicked into (ready for typing).
• :active - Activates during the exact moment an element is being clicked down.

The HTML & CSS: Instant State Change

<!-- HTML -->
<button class="btn">Hover Over Me!</button>

/* CSS */
.btn {
  background-color: #4C8BF5;
  color: white;
}

/* The Hover State */
.btn:hover {
  background-color: #2ecc71; /* Changes to green instantly */
}

The Output (Hover your mouse over the button):

Notice how the color snaps instantly. It feels jarring and unpolished.

Step 2: CSS Transitions (Smoothing the State Change)

To fix the harsh snapping effect, we use the transition property. This tells the browser to interpolate (calculate the mathematical steps) between the original state and the hover state over a specific duration of time.

The Engineering Rule: You must place the transition property on the Base Element (e.g., .btn), NOT on the hover state (e.g., .btn:hover). If you put it on the hover state, the animation will only be smooth when the mouse enters, but will snap harshly when the mouse leaves.

The transition property requires at least two values: the property you want to animate, and the time it should take.

The HTML & CSS:

.btn-smooth {
  background-color: #4C8BF5;
  /* Animate the background-color over 0.5 seconds smoothly */
  transition: background-color 0.5s ease;
}

.btn-smooth:hover {
  background-color: #2ecc71;
}

The Output (Hover your mouse over the button):

Step 3: CSS Transforms (Moving and Scaling)

Changing colors is nice, but physical movement is what truly makes a website feel interactive. The transform property allows you to manipulate the physical geometry of an element without affecting the surrounding page layout.

Common Transform Functions:

• scale(1.2): Increases the size by 20%. scale(0.5) shrinks it by half.
• rotate(45deg): Rotates the element 45 degrees clockwise.
• translateY(-10px): Moves the element 10 pixels UP on the Y-axis. (Negative is up, positive is down).
• translateX(20px): Moves the element 20 pixels to the RIGHT on the X-axis.

The HTML & CSS: The Floating Card Effect

.card {
  background-color: #e74c3c;
  /* We apply transition to the 'transform' property */
  transition: transform 0.4s ease-in-out;
}

.card:hover {
  /* You can chain multiple transforms together! */
  transform: scale(1.2) rotate(5deg) translateY(-10px);
}

The Output (Hover over the red card):

Interactive Card

Step 4: Keyframe Animations (Automatic Motion)

Transitions require a user trigger (like hovering). If you want an animation to run automatically as soon as the page loads, or if you want an animation to have multiple complex steps, you must use Keyframes.

Keyframes allow you to define exactly what the CSS should look like at specific percentages of the animation's timeline (from 0% to 100%).

The Mechanics:

1. Define the animation logic using the @keyframes rule and give it a custom name.
2. Attach that custom name to your HTML element using the animation property.

The CSS: A Pulsing Notification Dot

/* 1. Define the Keyframe Blueprint */
@keyframes pulseGlow {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(76, 139, 245, 0.7);
  }
  50% {
    transform: scale(1.05); /* Slightly larger in the middle */
    box-shadow: 0 0 0 15px rgba(76, 139, 245, 0); /* Fades out */
  }
  100% {
    transform: scale(1); /* Back to normal */
  }
}

/* 2. Attach it to the element */
.circle {
  animation: pulseGlow 2s infinite ease-in-out;
}

The Output (Runs Automatically):

Animation Shorthand Breakdown:
animation: pulseGlow 2s infinite ease-in-out;
- pulseGlow: The name of the @keyframes blueprint to follow.
- 2s: The duration of one complete cycle (2 seconds).
- infinite: How many times to run it (loops forever).
- ease-in-out: The timing function (starts slow, speeds up in the middle, slows down at the end).

Final Quiz: Test Your CSS Animation Logic

Click the buttons below to verify your knowledge.

1. What is the crucial difference between a CSS `transition` and a CSS `animation` (@keyframes)?

A) Transitions can only change colors, animations can change sizes.

Incorrect. Both can change sizes, colors, and layout properties.

B) Transitions require a trigger event (like `:hover`) to run, whereas animations can run automatically and loop endlessly.

Correct! Transitions simply interpolate between two fixed states when an event occurs. Keyframes allow you to script complex, autonomous movement.

C) Animations require JavaScript to work.

Incorrect. `@keyframes` are pure CSS and require zero JavaScript.

2. When applying a `transition` to smooth out a `:hover` effect, where should you write the `transition` property?

A) Inside the `:hover` pseudo-class block.

Incorrect. If you put it here, the animation will be smooth when the mouse enters, but will instantly snap back to the original state when the mouse leaves.

B) Inside the base element's selector block.

Correct! By placing the transition on the base element, the browser knows to smoothly calculate the change in *both* directions (hovering in and hovering out).

C) In the HTML tag using the `style` attribute.

Incorrect. While possible, mixing complex transitions into inline HTML is terrible practice for maintainability.

3. You want an element to move 50 pixels to the right without disrupting the layout of the text paragraphs surrounding it. Which property achieves this?

A) margin-left: 50px;

Incorrect. Adding margin affects the Box Model, which will push the surrounding text paragraphs out of the way.

B) padding-left: 50px;

Incorrect. Padding changes the internal size of the element, not its physical location on the screen.

C) transform: translateX(50px);

Correct! The `transform` property operates on the GPU and visually shifts the element without triggering a document layout recalculation. The surrounding elements remain entirely unaffected.