Transitions in CSS — How to add smooth motion to elements

The transition property in CSS turns abrupt changes into smooth motion. It is widely used in buttons, cards, and links.

If you are searching for transition in CSS or smooth hover effect or the difference between transitions and animations, this lesson explains it clearly.

What Are CSS Transitions?

When a property like color or size changes, it happens instantly. With transition, the change becomes gradual over a set duration.

Simple definition: transitions in CSS make the change between two states (such as normal and hover) smooth.

transition Syntax in CSS

transition: property duration timing-function delay;

Transition Values Explained

• property: the property to animate such as background-color or transform.
• duration: how long the motion lasts, like 0.3s.
• timing-function: the speed curve like ease or linear.
• delay: the wait time before motion starts (optional).

How to Use transition in CSS

A simple button demo

.btn-smooth {
    background-color: #0d6efd;
    transition: background-color 0.3s ease;
}

.btn-smooth:hover {
    background-color: #198754;
}

What does this code do? Smoothly changes button color on hover.

Expected result: a softer, more professional interaction.

Common mistake: placing transition only inside :hover.

Card Hover Motion

.card-hover {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card-hover:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

What does this code do? Lifts the card slightly and adds a shadow on hover.

Expected result: a more lively and interactive UI.

Common mistake: using large motion that feels distracting.

Multiple Property Transitions in CSS

.multi-box {
    transition: background-color 0.3s ease, border-radius 0.3s ease, transform 0.3s ease;
}

.multi-box:hover {
    background-color: #ffc107;
    border-radius: 28px;
    transform: rotate(2deg);
}

What does this code do? Animates color, shape, and rotation at the same time.

Expected result: a rich effect, but it needs moderation.

Common mistake: animating too many properties in one element.

When Should I Use transitions vs animations?

• Use transition when you only have two states (normal / hover).
• Use animation for complex multi-step motion with keyframes.
• For everyday UI, transitions are usually simpler and better.

Common Mistakes in CSS Transitions

1) Too long duration: makes the UI feel slow.

2) Using transition: all without need: may animate properties you don't want.

3) Ignoring motion preferences: some users prefer reduced motion.

FAQ - Common Search Questions

What are CSS transitions?

A CSS feature that makes property changes happen gradually over time instead of instantly.

How do I create a smooth hover effect in CSS?

Put transition on the base element, then change the property inside :hover.

What is a good transition duration in CSS?

Usually between 0.2s and 0.35s depending on the element.

What is the difference between transitions and animations?

Transitions are for moving between two states, while animations support multiple steps with keyframes.

Can I animate more than one property in a transition?

Yes, you can separate properties with commas such as transform and box-shadow.