Lesson 3.10: CSS Transitions, Animations & Transformations

CSS provides Transitions, Animations, and Transformations to make web pages interactive and visually appealing. These techniques allow elements to move, change, or transform smoothly without using JavaScript.

1. CSS Transitions

A transition defines how property changes occur smoothly over a specific duration when an element changes state (e.g., hover).

Properties:

• transition-property → Which property will animate (e.g., color, width)

• transition-duration → Duration of the animation (e.g., 0.5s)

• transition-timing-function → Speed curve (linear, ease, ease-in, ease-out)

• transition-delay → Delay before the transition starts

Example:

✅ When hovering, the button changes color and size smoothly.

2. CSS Animations

Animations allow continuous or repeating effects using @keyframes.

Syntax:

Example:

3. CSS Transformations

Transformations allow you to change the shape, size, or position of elements.

Common Transform Properties:

• translate(x, y) → Move element horizontally/vertically

• rotate(angle) → Rotate element

• scale(x, y) → Resize element

• skew(x-angle, y-angle) → Skew element

Example:

4. Combining Transitions & Transformations

You can combine both for smooth interactive effects:

✅ On hover, the box rotates, grows slightly, and changes color smoothly.

Key Takeaways

• Transitions: Smoothly animate property changes on state change.

• Animations: Continuous or repeated motion using @keyframes.

• Transformations: Move, rotate, scale, or skew elements.

• Combining all three creates interactive and dynamic user interfaces.