Transitions and Transformations

Adding visual movement enhances the user experience, providing feedback and making interfaces feel more polished. CSS offers two primary ways to achieve this: Transitions and Animations (covered in P3.3).

1. CSS Transitions (Smooth State Changes)

A Transition is used to create a smooth, gradual change when an element moves from one state (e.g., :hover) to another, instead of instantly jumping.

A. Key Transition Properties

You must define what property changes, and how long that change takes.

B. The Shorthand and Implementation

The properties are usually combined using the transition shorthand and applied to the default state of the element.

/* 1. The default (resting) state */
.button {
  background-color: blue;
  transition: all 0.3s ease-in-out; /* Applied here */
}

/* 2. The target (hover) state */
.button:hover {
  background-color: red; /* This property will smoothly transition over 0.3s */
  transform: scale(1.1); /* This property will also transition */
}

• Note: If you only wanted the background-color to transition, you would use: transition: background-color 0.3s ease-in-out;

2. CSS Transformations

Transformations allow you to visually manipulate an element in 2D or 3D space without affecting the surrounding layout. They are often combined with transitions for smooth motion.

• Property: transform
• Best Practice: Transformations are highly optimized by browsers because they don’t cause layout changes, making them ideal for high-performance visual effects.

A. 2D Transformation Functions

These manipulate the element along the X and Y axes.

/* Example combined with Transition */
.card {
  transition: transform 0.4s ease;
}

.card:hover {
  /* Scale the card up by 5% and lift it 5px up */
  transform: scale(1.05) translateY(-5px); 
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

B. 3D Transformation Functions (Adding Depth)

These functions introduce the Z-axis, creating depth.

To make 3D transformations visible, the parent container must have the perspective property set.

.cube-parent {
  perspective: 1000px; /* Required to create a 3D viewing space */
}

.cube-face {
  transform: rotateY(180deg); /* This will appear as a 3D flip */
}