Home 〉 CSS Tutorials 〉 CSS Transition Property Explained with Easy Examples | Learn CSS Animation

CSS Transition Property Explained with Easy Examples | Learn CSS Animation !

CSS Transition Property Explained with Easy Examples | Learn CSS Animation !

Want to animate changes like color or size smoothly? The `transition` property lets you add animations to any CSS property change. Learn how to use `transition-duration`, `transition-timing-function`, and more. It's ideal for buttons, hovers, and interactive designs.

Introduction

The CSS transition property allows you to create smooth animations when CSS property values change. Instead of changes happening instantly, transitions let them occur over time, making your website feel more dynamic and polished.

Why Use CSS Transitions?

CSS transitions make it easier to enhance user experience without writing JavaScript. They help in:

  • Adding hover effects
  • Creating button animations
  • Smoothing layout changes

Basic Syntax

Syntax ✍

selector {
transition: property duration timing-function delay;
}

Example:

Example 📄

.box {
transition: background-color 0.5s ease-in-out;
}

Step-by-Step: Learn with Examples

1. Transition on Hover

Change background color when hovering.

Code : 1 📝

<!DOCTYPE html>
<html>
<head>
<style>

.btn {
background-color: #3498db;
color: white;
padding: 10px 20px;
border: none;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #2ecc71;
}

</style>
</head>
<body>

<button class="btn">Hover Me</button>

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Explanation: The 'transition' makes the background color shift smoothly when the user hovers over the button.

2. Multiple Transitions

Code : 2 📝

<!DOCTYPE html>
<html>
<head>
<style>

.box {
width: 100px;
height: 100px;
background: red;
transition: width 1s ease, height 1s ease;
}
.box:hover {
width: 200px;
height: 200px;
}

</style>
</head>
<body>

<div class="box"></div>

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Explanation: On hover, the box gradually changes size.

3. Using 'transition-delay' and 'transition-duration'

Code : 3 📝

<!DOCTYPE html>
<html>
<head>
<style>

.circle {
width: 50px;
height: 50px;
background: purple;
border-radius: 50%;
transition: transform 0.5s ease 0.3s;
}
.circle:hover {
transform: scale(1.5);
}

</style>
</head>
<body>

<div class="box"></div>

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Explanation: The scale effect will begin 0.3s after hover and last for 0.5s.

CSS Transition Shorthand Properties

Property Description
'transition-property' The CSS property to animate (e.g. 'width', 'color')
'transition-duration' Time the transition takes (e.g. '1s', '500ms')
'transition-timing-function' Easing function ('ease', 'linear', 'ease-in')
'transition-delay' Delay before the transition starts

Common Timing Functions

  • 'ease' - starts slow, then fast, then slow again
  • 'linear' - constant speed
  • 'ease-in' - slow at start
  • 'ease-out' - slow at end
  • 'ease-in-out' - slow start and end

Conclusion

CSS transitions are an easy and powerful way to animate changes on your webpage without needing JavaScript. They help create a smooth user experience and bring a more interactive feel to your design. Mastering 'transition' is the first step toward building more advanced CSS animations.

Suggested Posts:

Frequently Asked Questions (FAQs)

Can I animate multiple properties using 'transition'?

Yes! You can separate each transition with commas.

Is JavaScript needed to use CSS transitions?

No, you can use them with just CSS, triggered by hover, focus, active, etc.

What's the difference between 'transition' and 'animation' in CSS?

'transition' animates changes in property values. 'animation' allows more control like keyframes and looping.

Can I transition between different display types (like 'none' to 'block')?

No, 'display' is not animatable. Use opacity or transform instead.

Previous Post Next Post