Transitions & Transforms

Lesson 1 of 16 Beginner Interactive

CSS Transitions smoothly animate property changes over time. CSS Transforms rotate, scale, move, and skew elements.

Transition Properties

transition-property — which property to animate (or all)
transition-duration — how long the animation takes (e.g., 0.3s)
transition-timing-function — the speed curve: ease, linear, ease-in-out
transition-delay — delay before starting
transition — shorthand: all 0.3s ease

Transform Functions

rotate(45deg) — rotate the element
scale(1.5) — increase size
scaleX(2) / scaleY(0.5) — scale one axis
translateX(20px) / translateY(-10px) — move the element
skew(10deg) — slant the element

Syntax

CSS

/* Transition */
.button {
    background: #2563eb;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    transition: all 0.3s ease;
}
.button:hover {
    background: #1d4ed8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

/* Transform */
.card:hover {
    transform: scale(1.05) rotate(1deg);
}
.icon {
    transition: transform 0.3s ease;
}
.icon:hover {
    transform: rotate(180deg);
}

Transitions and Transforms

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Transitions & Transforms</title>
    <style>
        .button {
            background: #3b82f6;
            color: #fff;
            padding: 12px 24px;
            border-radius: 8px;
            display: inline-block;
            transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s;
        }
        .button:hover {
            background: #2563eb;
            transform: translateY(-4px) scale(1.05);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
        .button:active {
            transform: scale(0.95);
        }
    </style>
</head>
<body>
    <p>Hover the button to see the transition on transform and background.</p>
    <a class="button" href="#">Hover me</a>
</body>
</html>

Try It Yourself

Practice

Exercise

Add a transition to a button that changes background color and lifts up on hover.

Answer

.btn {
    transition: all 0.3s ease;
}
.btn:hover {
    background: #1d4ed8;
    transform: translateY(-2px);
}

Exercise

Create a card that scales up and shows a shadow on hover.

Answer

.card {
    transition: all 0.3s ease;
}
.card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

Quick Quiz

What property must you set for a CSS transition to work?

transition: all

transition-duration must be greater than 0

Both transition and duration

Only transform

You need both a transition property and a duration > 0 for transitions to work.

Which transform function increases the size of an element?

rotate()

translate()

scale()

skew()

scale() increases or decreases the size of an element.

Interview Questions

Transitions require a trigger (hover, class change) and animate between two states. Animations use @keyframes and can run automatically, loop, and have multiple intermediate states. Transitions are simpler for basic hover effects; animations are better for complex, multi-step, or self-running effects.

translate() moves elements without affecting document flow — other elements don't reflow. position changes (absolute, relative) remove elements from flow or shift other elements. translate() also benefits from GPU acceleration and works smoothly with transitions.

Next Lesson

CSS Animations