The transition-duration property is a fundamental part of CSS transitions that defines the length of time an animation should take to complete. You can specify the duration in seconds (s) or milliseconds (ms). This property is crucial for creating smooth and paced visual effects on a webpage.
Example 1: Basic Duration on Hover
/* Style for the element */
.box {
width: 100px;
height: 100px;
background-color: steelblue;
/* Define the duration for the transition */
transition-duration: 2s;
}
/* Change the background color on hover */
.box:hover {
background-color: orange;
}
Explanation: This code applies a 2-second transition duration to the .box element. When you hover over the box, the background color will gradually change from steelblue to orange over the course of two seconds.
Example 2: Milliseconds for Faster Transitions
/* Style for the button */
.button {
padding: 10px 20px;
border: 1px solid black;
/* Use milliseconds for a quick transition */
transition-duration: 300ms;
}
/* Scale the button up on hover */
.button:hover {
transform: scale(1.1);
background-color: lightgray;
}
Explanation: Here, the transition-duration is set to 300 milliseconds. This creates a much faster, almost instant, scaling and background color effect when the user hovers over the button.
Example 3: No Transition with Zero Duration
/* Style for the link */
a {
color: blue;
/* Setting duration to 0s means the change is immediate */
transition-duration: 0s;
}
/* Change color on hover without a transition */
a:hover {
color: red;
}
Explanation: By setting transition-duration to 0s, you effectively disable the transition effect. The color of the link will change from blue to red instantly upon hover, with no gradual animation.
Example 4: Using the 'transition' Shorthand Property
/* Style for the interactive panel */
.panel {
opacity: 0.5;
/* Shorthand: property name, then duration */
transition: opacity 1.5s;
}
/* Make the panel fully opaque on hover */
.panel:hover {
opacity: 1;
}
Explanation: This example uses the transition shorthand property to set both the transition-property (opacity) and the transition-duration (1.5s) in a single declaration. This is a common and more concise way to write transitions.
Example 5: Focus Transition for Form Inputs
/* Style for the input field */
input[type="text"] {
border: 2px solid #ccc;
/* Set a half-second duration for the focus effect */
transition-duration: 0.5s;
}
/* Change border color when the input is focused */
input[type="text"]:focus {
border-color: dodgerblue;
}
Explanation: This code enhances user experience on forms. When a user clicks into the text input, the transition-duration of 0.5s creates a smooth color change for the border, indicating the field is active.
Example 6: Different Durations for Multiple Properties
/* Style for the shape */
.shape {
width: 100px;
height: 100px;
background-color: purple;
/* Assign different durations to different properties */
transition-property: transform, background-color;
transition-duration: 2s, 500ms;
}
/* Apply transformations on hover */
.shape:hover {
transform: rotate(180deg);
background-color: gold;
}
Explanation: You can set multiple durations for different properties. In this case, the rotation (transform) takes 2 seconds to complete, while the background-color change happens more quickly in 500 milliseconds.
Example 7: Active State Transition on a Button
/* Style for a clickable button */
.click-me {
background-color: #28a745;
color: white;
padding: 15px;
border-radius: 5px;
/* A quick duration for the active (click) state */
transition-duration: 0.1s;
}
/* Style for when the button is being pressed */
.click-me:active {
transform: translateY(2px);
background-color: #218838;
}
Explanation: This example applies a very short transition-duration of 0.1s to a button's active state. This provides immediate visual feedback to the user when they click down on the button, making the interface feel more responsive.