Clean • Professional
A CSS transition defines how an element changes from one style to another over a certain period. Instead of instantly changing styles, transitions animate the change smoothly, providing a polished effect.
For example, instead of a button instantly changing color on hover, a transition makes it fade gracefully from one color to another.
width, background-color, transform, etc.).0.5s, 1s, 2s).ease, linear, ease-in, ease-out, ease-in-out, or cubic-bezier()).0.5s, 1s, etc.).The transition-property defines which CSS properties should be animated. You can target a single property:
.box {
width: 150px;
height: 150px;
background-color: #54a0ff;
color: white;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
border-radius: 12px;
/* Only the background-color will animate */
transition-property: background-color;
transition-duration: 1s;
}
.box:hover {
background-color: #ff6b6b; /* Only this property will transition */
}
<div class="box">Hover Me</div>
Or multiple properties:
transition-property: width, height, transform;
.box {
width: 150px;
height: 150px;
background-color: #54a0ff;
color: white;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
border-radius: 12px;
transition-property: width, height, background-color, transform;
transition-duration: 0.5s, 0.7s, 1s, 0.8s;
transition-timing-function: ease, ease-in-out, linear, ease-in;
}
.box:hover {
width: 250px;
height: 200px;
background-color: #ff6b6b;
transform: rotate(10deg) scale(1.1);
cursor: pointer;
}
<div class="box">Hover Me</div>
The transition-duration specifies how long the animation lasts:
.box {
width: 150px;
height: 150px;
background-color: #54a0ff;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
border-radius: 12px;
transition-property: background-color;
transition-duration: 2s; /* Smooth transition over 2 seconds */
}
.box:hover {
background-color: #ff6b6b;
}
<div class="box">Hover Me</div>
For multiple properties, different durations can be applied:
.box {
width: 150px;
height: 150px;
background-color: #54a0ff;
color: white;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
border-radius: 12px;
transition-property: width, height, background-color;
transition-duration: 0.5s, 1s, 1.5s; /* Each property has different duration */
}
.box:hover {
width: 250px; /* 0.5s */
height: 200px; /* 1s */
background-color: #ff6b6b; /* 1.5s */
cursor: pointer;
}
<div class="box">Hover Me</div>
The transition-timing-function controls how the animation progresses over time:
| Function | Description |
|---|---|
linear | Constant speed |
ease | Slow start, fast middle, slow end (default) |
ease-in | Slow start, fast end |
ease-out | Fast start, slow end |
ease-in-out | Slow start & end, fast middle |
cubic-bezier(n,n,n,n) | Custom speed curve |
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition Timing Function Example</title>
<style>
body {
display: flex;
justify-content: space-around;
align-items: center;
height: 100vh;
background-color: #f4f4f9;
font-family: Arial, sans-serif;
}
.box {
width: 100px;
height: 100px;
background-color: #54a0ff;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
border-radius: 12px;
transition-property: transform;
transition-duration: 2s;
}
/* Different timing functions */
.linear:hover {
transition-timing-function: linear;
transform: translateY(100px);
}
.ease:hover {
transition-timing-function: ease;
transform: translateY(100px);
}
.ease-in:hover {
transition-timing-function: ease-in;
transform: translateY(100px);
}
.ease-out:hover {
transition-timing-function: ease-out;
transform: translateY(100px);
}
.ease-in-out:hover {
transition-timing-function: ease-in-out;
transform: translateY(100px);
}
</style>
</head>
<body>
<div class="box linear">Linear</div>
<div class="box ease">Ease</div>
<div class="box ease-in">Ease-In</div>
<div class="box ease-out">Ease-Out</div>
<div class="box ease-in-out">Ease-In-Out</div>
</body>
</html>
The transition-delay sets a pause before the animation starts:
.box {
width: 150px;
height: 150px;
background-color: #54a0ff;
color: white;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
border-radius: 12px;
transition: background-color 1s;
transition-delay: 1s; /* Wait 1 second before starting */
}
.box:hover {
background-color: #ff6b6b;
}
<div class="box">Hover Me</div>
This example combines property, duration, timing function, and delay to create a dynamic, interactive hover effect:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Transitions Example</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
background-color: #f4f4f9;
}
.transition-box {
width: 150px;
height: 150px;
background-color: #54a0ff;
color: white;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
/* Transition Properties */
transition-property: width, height, background-color, transform;
transition-duration: 0.6s, 0.8s, 1s, 0.7s;
transition-timing-function: ease-in, ease-out, ease-in-out, linear;
transition-delay: 0s, 0.2s, 0.4s, 0s;
}
.transition-box:hover {
width: 250px;
height: 200px;
background-color: #ff6b6b;
transform: scale(1.1) rotate(10deg);
cursor: pointer;
}
</style>
</head>
<body>
<div class="transition-box">Hover Me</div>
</body>
</html>