SyntaxStudy
Sign Up
Home CSS Reference transition

transition

property CSS3

Shorthand for smooth transitions between CSS property values. Triggered by state changes.

Syntax

transition: property duration timing-function delay;

Example

css
.btn {
    background: #3498db;
    transition: background 0.3s ease, transform 0.2s;
}
.btn:hover {
    background: #2980b9;
    transform: translateY(-2px);
}

/* Transition all */
.card {
    transition: all 0.3s ease;
}
.card:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    transform: translateY(-5px);
}