Transforms and Transitions: Animating Your Web Pages

CSS transforms and transitions – how to move, rotate, and resize elements, and how to animate property changes over time. Both are useful for hover effects, UI feedback, and subtle page motion without JavaScript.

CSS transforms

Transforms change an element’s appearance – its position, size, rotation, or skew – without affecting the layout of surrounding elements.

Common transform functions

• translate(): Moves an element from its current position.
• rotate(): Rotates an element around a point.
• scale(): Increases or decreases an element’s size.
• skew(): Tilts an element along the X and Y axes.

Example usage

Rotate and move in one declaration:

.box {
    transform: rotate(45deg) translate(100px, 50px);
}

That rotates .box by 45 degrees and moves it 100 pixels right and 50 pixels down.

CSS transitions

Transitions animate property changes over a set duration instead of switching instantly.

Transition properties

• transition-property: Which CSS property to animate.
• transition-duration: How long the transition takes.
• transition-timing-function: The speed curve (e.g. Ease, linear).
• transition-delay: Delay before the transition starts.

A simple transition

A button that changes colour smoothly on hover:

.button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    transition: background-color 0.5s ease;
}

.button:hover {
    background-color: green;
}

The background fades to green over half a second when hovered.

Combining transforms and transitions

Pair them for effects like a card flip on hover:

HTML structure

<div class="card">
    <div class="card-inner">
        <div class="card-front">Front</div>
        <div class="card-back">Back</div>
    </div>
</div>

CSS

.card-inner {
    transition: transform 1s;
    transform-style: preserve-3d;
}

.card:hover .card-inner {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

On hover, the card flips to show the back face.

Responsive animation

On mobile, heavy animations can hurt performance and usability. Consider reducing or disabling them on smaller screens:

Media queries and transitions

Disable a transition below a certain width:

@media screen and (max-width: 600px) {
    .button {
        transition: none;
    }
}

That removes the button hover transition on screens narrower than 600 pixels.

Performance considerations

Animations can look good, but too many will distract users and slow down lower-powered devices. Keep motion subtle and purposeful – it should help the user, not get in the way.

Start with a simple colour transition on hover, then try a transform. If the effect does not improve the experience, leave it out.