| Introduction to CSS |
|---|
| Text and Font Styling |
|---|
| Box Model and Layout |
|---|
| Advanced Layout with Flexbox and Grid |
|---|
| Responsive Design |
|---|
| CSS Transitions and Animations |
|---|
The transition-duration property in CSS specifies the amount of time it takes for a transition effect to complete. It is one of the properties used in conjunction with the transition shorthand property, which allows for defining the transition of CSS properties.
Syntax
transition-duration: time;
time: Specifies the duration of the transition. It can be defined in seconds (e.g., 2s) or milliseconds (e.g., 200ms).
Default Value
The default value for ‘transition-duration‘ is ‘0s‘, meaning there is no transition effect unless specified.
Example 1: Basic Usage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition Duration Example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
transition: background-color 2s;
}
.box:hover {
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
In this example, the ‘.box‘ element will take 2 seconds to transition from blue to red when hovered over.
Example 2: Multiple Transitions
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Transitions Example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
transform: rotate(0deg);
transition: background-color 2s, transform 1s;
}
.box:hover {
background-color: red;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
In this example, the ‘.box‘ element will take 2 seconds to change its background color and 1 second to rotate 45 degrees when hovered over.
Example 3: Using Different Durations for Different Properties
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Different Durations Example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
border-radius: 0;
transition: background-color 1s, border-radius 2s;
}
.box:hover {
background-color: green;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
In this example, the ‘.box‘ element will take 1 second to change its background color and 2 seconds to change its border-radius to 50% when hovered over.
Example 4: Using transition Shorthand
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition Shorthand Example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
transform: translateX(0);
transition: background-color 1s, transform 500ms;
}
.box:hover {
background-color: purple;
transform: translateX(100px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
In this example, the ‘.box‘ element will take 1 second to change its background color and 500 milliseconds to move 100 pixels to the right when hovered over.
Key Points
transition-durationcan accept multiple durations if multiple properties are being transitioned.- The value must be a positive number, either in seconds (
s) or milliseconds (ms). - The
transitionshorthand property can includetransition-durationas part of its declaration, along withtransition-property,transition-timing-function, andtransition-delay.
By using transition-duration effectively, you can create smooth and visually appealing animations and transitions on your web pages.
