CSS transition properties allow CSS property values to vary gradually over time when an element changes visual states. They’re implicit animations triggered by CSS property changes. Transitions ease the element’s state change over a given time. The browser performs the necessary tasks to gradually alter property values.
An beginning value, end value, transition specification, and trigger are needed to make a transition. A :hover state is a popular trigger, but JavaScript may also change property values or add/remove classes. To ensure reverse transition, transition attributes are commonly defined on the element’s default state.
Transition Properties:
transition-property:
This property requires which CSS property or properties should have their value changes transitioned. You can specify a single property name, a list of properties separated by commas, or use the keyword “all” to transition every possible property. You cannot transition every CSS property; some properties have an “Animation Type” indicating their interpolation capability. Properties that accept length, number, color, or calc() can often be animated, while those taking keywords or discrete values like url() generally cannot. Setting transition-property: all; by itself has no effect without specifying a duration.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.aa{
width: 100px;
height: 100px;
transition-property: all;
background-color:green;
}
.aa:hover{
width:300px;
background-color:red;
}
</style>
</head>
<body>
<h1 class="aa">Hello, World!</h1>
<p>This is a simple HTML5 document.</p>
<div class="box">A styled box</div>
</body>
</html>transition-duration
This parameter defines the length of time the transition takes to complete. The value is specified in seconds (s) or milliseconds (ms). A value of 0 is the default and means no transition occurs. We interpret negative values as 0.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.aa{
width: 100px;
height: 100px;
transition-duration:5s;
background-color:green;
}
.aa:hover{
width:300px;
background-color:red;
}
</style>
</head>
<body>
<h1 class="aa">Hello, World!</h1>
<p>This is a simple HTML5 document.</p>
<div class="box">A styled box</div>
</body>
</html>transition-timing-function
It controls how the transition changes speed during its duration, specifying the “speed curve”. It dictates how the property value “moves”. Common values are keywords like “ease,” “linear,” “easy-in,” “easy-out,” and “easy-in-out.” Keywords represent predefined cubic-bezier curves. The cubic-bezier(x1, y1, x2, y2) function allows you to define custom timing curves. The steps() function provides discrete, instant changes in steps rather than a fluid transition.
Example:
.aa{
/* ...(more styles)... */
transition-timing-function: ease; /* Start slow, speed up, end slow */
}
.aa{
/* ...(more styles)... */
transition-timing-function: linear; /* Constant speed */
}
.aa {
/* ...(more styles)... */
transition-timing-function: ease-out; /* Start fast, end slow */
}
.aa{
/* ...(more styles)... */
transition-timing-function: cubic-bezier(0.42, 0.0, 1.0, 1.0); /* Equivalent to ease-in */transition-delay
It is an optional property requires a waiting period before the transition begins after the property value changes. It is also defined in seconds (s) or milliseconds (ms). A negative value will start the transition immediately, but it will begin partway through its total duration.
Example:
.aa {
/* ...(more styles)... */
transition-delay: 0.5s; /* Wait 0.5 seconds before starting */
}
.aa {
/* ...(more styles)... */
transition-delay: 50ms; /* Wait 50 milliseconds before starting */
}The transition Shorthand Property
Instead of declaring each of the four properties individually, you can use the transition shorthand property. The syntax includes the property name, duration, timing function, and delay, in that order: transition: [property] [duration] [timing-function] [delay];. The first-time value specified is always construed as the transition-duration, and the second time value is the transition-delay.
Example
.aa {
transition: transform 0.2s ease-out 50ms;
}
Example with only property and duration:
.aa {
/* ...(more styles)... */
transition: background-color 1s; /* Transition background-color over 1 second, using default timing and delay */
}
aa:hover {
background-color: green;
}Multiple Transitions
Apply transitions to multiple properties, potentially with different durations, timing functions, and delays, by providing a comma-separated list of values for the longhand properties or by listing separate shorthand declarations separated by commas. The order of values in the comma-separated lists for longhand properties should match.
Example
.aa {
transition-property: border, color, text-shadow;
transition-duration: 2s, 3s, 8s;
transition-timing-function: linear, ease, ease-in-out;
transition-delay: 0s, 0.5s, 1s;
}(Note: timing-function and delay lists added from syntax descriptions)
Example
.aa {
transition: border 2s linear 0s, color 3s ease 0.5s, text-shadow 8s ease-in-out 1s;
}(Note: timing-function and delay values added for consistency with longhand example)
Vendor prefixes (-webkit-, -moz-, -o-) were required for transitions. However, IE10 and all other modern browsers support the unprefixed syntax. Older mobile devices might still require the -webkit- prefix. Browsers that don’t support transitions will still apply the property changes, but they will happen instantly.
CSS3 Topics