It enhances user experience with smooth animations and offers options like time in seconds/milliseconds, initial, inherit, revert, and unset.
Introduction
The transition-duration
property in CSS is essential for creating smooth, visually appealing transitions between different states of an element. By default, it’s set to 0s
, meaning no transition occurs. This property helps you create dynamic animations without complicated JavaScript.
Specification
The transition-duration
property is part of the CSS Transitions module, which allows smooth animations between different states of an element. Understanding this specification helps you use transition-duration
effectively. For more details, check the [CSS Transitions specification]WebsiteUrl.
Syntax
The syntax for transition-duration
is straightforward:
Property Values
time
: Duration of the transition effect in seconds (s
) or milliseconds (ms
).initial
: Sets the property to its default value (0s
).inherit
: Inherits the property from the parent element.
Values
The transition-duration
property accepts several values:
<time>
Specifies the duration in seconds (s
) or milliseconds (ms
). Negative values are invalid.
initial
Sets the duration to 0s
, meaning no transition occurs.
inherit
Inherits the duration from the parent element.
revert
Resets the property to the user agent’s default stylesheet.
revert-layer
Resets the property considering the cascade layer.
unset
Resets the property to its natural value (either inherit
or initial
).
Formal Definition
The transition-duration
property is part of the CSS Transitions module and specifies the time a transition takes to complete.
Initial Value
- Initial Value:
0s
Applies To
- Elements: All elements, as well as
::before
and::after
pseudo-elements.
Inherited
- Inherited: No
Computed Value
- Computed Value: As specified
Animation Type
- Animation Type: Not animatable
Formal Syntax
The formal syntax for transition-duration
is:
Explanation
<time [0s,∞]>
: A valid time value from0s
to infinity.#
: Can be repeated for multiple properties.
Examples
Example 1: Basic Transition Duration
Change the background color of a div on hover with a 2-second transition.
HTML
CSS
Example 2: Multiple Transition Durations
Change width and height of a div on hover with different durations.
HTML
CSS
Example 3: Inheriting Transition Duration
Inherit the transition duration from a parent element.
HTML
CSS
Example 4: Using Initial Value
Set the transition duration to its default value.
HTML
CSS
Specifications
The transition-duration
property is part of the CSS Transitions module, which enables smooth animations between different states of an element.
Specification Details
- Module: [CSS Transitions]WebsiteUrl
- Property:
transition-duration
- Purpose: Specifies the length of time a transition effect takes to complete.
Key Features
- Default Value:
0s
- Time Values: Supports seconds (
s
) or milliseconds (ms
). - Multiple Durations: Allows specifying multiple durations for different properties.
- Inheritance: Supports inheritance from parent elements.
- Initial and Unset: Provides options to reset the property.
Official Documentation
For detailed information, refer to the [CSS Transitions specification]WebsiteUrl.
Browser Compatibility
The transition-duration
property is widely supported across modern browsers. Here’s a compatibility chart:
Browser | Version | Supported Since |
---|---|---|
Google Chrome | 26 | March 2013 |
Mozilla Firefox | 16 | October 2012 |
Microsoft Edge | 12 | July 2015 |
Internet Explorer | 10 | October 2012 |
Opera | 12.1 | April 2012 |
Safari | 6.1 | November 2012 |
Notes on Compatibility
- Chrome: Supported since version 26.
- Firefox: Supported since version 16.
- Microsoft Edge: Supported since version 12.
- Internet Explorer: Supported since version 10.
- Opera: Supported since version 12.1.
- Safari: Supported since version 6.1.
Polyfills and Fallbacks
For older browsers, use polyfills or JavaScript fallbacks. Libraries like Modernizr can help detect feature support and apply fallbacks.
Example of a Fallback
Here’s an example of a JavaScript fallback:
This ensures that your transitions still work in older browsers.
Conclusion
Ensuring browser compatibility is key for a smooth user experience. Understanding transition-duration
and adding fallbacks can help create seamless transitions across all browsers.
For the latest on browser support, check resources like Can I Use or MDN Web Docs.
See Also
For more on CSS transitions, check out:
- [Using CSS transitions]WebsiteUrl: A guide on using CSS transitions effectively.
- [
transition
]WebsiteUrl: Learn about the shorthandtransition
property. - [
transition-property
]WebsiteUrl: Specifies the CSS properties to transition. - [
transition-timing-function
]WebsiteUrl: Defines the speed curve of the transition. - [
transition-delay
]WebsiteUrl: Specifies the delay before the transition starts. - [
TransitionEvent
]WebsiteUrl: Represents events occurring during CSS transitions.
FAQs
What is the transition-duration
property?
The transition-duration
property specifies how long a transition effect lasts.
How do I set a transition to last 3 seconds?
Use transition-duration: 3s;
.
Can I set different durations for different properties?
Yes, you can. Example: transition-duration: 1s, 2s, 3s;
.
What is the default value of transition-duration
?
The default value is 0s
, meaning the transition is instant.
How does transition-duration
work with easing functions?
The transition-duration
property works with easing functions (transition-timing-function
) to control the speed curve of the transition.
What happens if I set a negative value for transition-duration
?
Negative values are invalid, and the transition won’t occur.
Can I inherit the transition-duration
value?
Yes, use transition-duration: inherit;
.
What does the initial
value do?
The initial
value sets transition-duration
to its default (0s
).
What is the purpose of the revert
value?
The revert
value resets the property to the user agent’s default stylesheet value.
What is the revert-layer
value used for?
The revert-layer
value resets the property considering the cascade layer it’s in.
What does the unset
value do?
The unset
value resets the property to its natural value, acting as either inherit
or initial
.
We'll be right here with you every step of the way.
We'll be here, prepared to commence this promising collaboration.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.