← Back to Examples

CSS Transitions

Transitions create smooth animations between property values. Hover over the elements below!

1. Basic Color Transition

Hover me
transition: background-color 0.3s ease;

2. Multiple Property Transitions

Hover me
transition: all 0.3s ease;
/* Changes: background, scale, border-radius, shadow */

3. Button Transitions

4. Card Hover Effect

Card image

Card Title

Hover for lift and zoom effect

5. Timing Functions Comparison

Hover over this section to see different timing functions:

ease
linear
ease-in
ease-out
ease-in-out

6. Input Focus Transition

input:focus {
    border-color: #1abc9c;
    box-shadow: 0 0 0 4px rgba(26, 188, 156, 0.2);
}

7. Navigation Link Animation

← Back to Examples