CSS Transition
The CSS Transition property animates property changes over time. Instead of jumping instantly from one value to another, the change happens smoothly. Transitions add polish to hover effects, focus states, and UI interactions.
Transition Sub-properties
transition-property
Which property to animate — color, background, transform, or all.
transition-duration
How long the animation lasts — e.g. 0.3s.
transition-timing-function
Speed curve — ease, linear, ease-in, ease-out, cubic-bezier.
transition-delay
Wait time before the animation starts.
Shorthand
Combine all four — transition: all .3s ease 0s;.
Transition Syntax
selector {
transition-property: background-color;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0s;
}
/* Shorthand */
selector { transition: background-color .3s ease 0s; }
/* Animate everything */
selector { transition: all .3s ease; }
Transition in CSS
In CSS, transitions provide a way to smoothly animate changes in CSS properties. They allow elements to change from one style to another over a specific duration, creating a more dynamic and visually appealing user experience.
Example 1: Box Transition
This example shows how a box changes its width, height, and background color smoothly on hover.
<!DOCTYPE html>
<html>
<head>
<style>
div{
color:white;
}
.box{
width:100px;
height:100px;
background-color:#509BD1;
transition:
width 0.5s,
height 0.5s,
background-color 0.5s;
}
.box:hover{
width:200px;
height:200px;
background-color:tomato;
}
</style>
<title>
PBA INSTITUTE
</title>
</head>
<body>
<div class="box">
PBA INSTITUTE
</div>
</body>
</html>
- transition: Smoothly animates property changes.
- width and height: Increase when the box is hovered.
- background-color: Changes smoothly from blue to tomato.
Example 2: Button Transition
This example shows how a button changes background color and text color smoothly on hover.
<!DOCTYPE html>
<html>
<head>
<style>
.btn{
padding:10px 20px;
background-color:#4CAF50;
color:white;
border:none;
cursor:pointer;
transition:
background-color 0.3s,
color 0.3s;
}
.btn:hover{
background-color:#45a049;
color:#f2f2f2;
}
</style>
</head>
<body>
<button class="btn">
PBA
</button>
</body>
</html>
- transition: Controls smooth color change.
- :hover: Applies styles when the mouse moves over the button.
- background-color: Changes from green to dark green.
Conclusion
CSS transitions help create smooth property changes over time. They improve user interaction and make websites more attractive by animating changes such as size, color, and layout movement.
Transition Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Transition</title>
<style>
body { display: flex; gap: 20px; justify-content: center; padding: 60px; background: #f5f7fa; }
.box {
width: 140px;
height: 140px;
background: #1a73e8;
color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
transition: all 0.4s ease;
}
.box:hover {
background: #d81b60;
transform: rotate(8deg) scale(1.05);
box-shadow: 0 10px 24px rgba(0,0,0,.2);
}
</style>
</head>
<body>
<div class="box">Hover Me</div>
<div class="box">Hover Me</div>
</body>
</html>
Code Explanation
transition: all 0.4s ease: Animates every property over 0.4 seconds with an ease curve.:hover: Triggers the new state.transform: rotate(8deg) scale(1.05): Rotates and grows the element.- Box-shadow lift: Adds depth to the hover effect.
Timing Functions
| Function | Behavior | Use Case |
|---|---|---|
ease |
Slow start, fast middle, slow end | Default — most natural feel |
linear |
Constant speed | Loading bars, progress |
ease-in |
Slow start | Entering animations |
ease-out |
Slow end | Exiting animations |
ease-in-out |
Slow start and end | Balanced transitions |
cubic-bezier() |
Custom curve | Fine-tuned motion |
What You Can Transition
Colors
background-color, color, border-color.
Transforms
scale, rotate, translate, skew.
Box Properties
box-shadow, border-radius, opacity.
Common Transition Values
Important Notes
- Not all properties transition: Only properties with numeric or color values can be animated.
- Use 'all' carefully: Animating everything can hurt performance — be specific when possible.
- Prefer transform & opacity: They are hardware-accelerated.
- Keep durations short: 0.2s - 0.4s feels snappy without being slow.
Real-World Use Cases
Hover Effects
Smoothly change buttons and cards on hover.
Focus States
Animate form input borders on focus.
Menu Toggles
Slide and fade dropdowns and side menus.
Practice Questions
- Add a 0.3s transition to a button's background color.
- Use transition-delay to delay an animation by 0.5s.
- Apply
transition: all .4s ease-in-outto a card. - Make an image grow on hover with smooth transition.
- Use cubic-bezier() to create a custom timing function.
Frequently Asked Questions
- What is the CSS transition property: It defines how property changes are animated — duration, timing function, delay.
- Difference between transition and animation: Transition runs once between two states; animation can have multiple keyframes and loop.
- Which timing function is most natural:
easeis the default and feels most natural for UI interactions. - Can I transition multiple properties: Yes — separate them with commas or use
all.
Conclusion
Transitions are the simplest way to add smooth motion to your UI. With just one line of CSS, you can transform jarring property changes into elegant animations that elevate user experience.
CSS All Topics
Continue Learning
Previous
Go to Animation Button Chapter