What is CSS Transition Property?
CSS transitions are visual effects applied to smoothly transition an element's style from one state to another, eliminating the need for Flash or JavaScript.
Specify the CSS attribute, like width, height, color, and more, that you wish to animate.
Specify the duration of the transition effect using time units such as seconds (s) or milliseconds (ms).
- Initiating the Transition: By default, a transition commences when a user hovers over an element.
For added flexibility, the transition can be initiated using JavaScript as well.
NOTE: IE9 and earlier versions do not support the transition property.
How CSS Transitions Work?
The CSS transition attribute enables you to define the CSS attributes to transition, in addition to setting the transition's duration and easing function. This feature smoothly transitions the property values between the starting point and the desired endpoint whenever the designated property undergoes a change, like when a class is applied or when the mouse hovers over it.
Syntax:
element {
transition: property duration timing-function delay;
}
- Property: The CSS property, such as color, width, opacity, etc., that you want to transition.
- Duration: The amount of time in seconds (s) or milliseconds (ms) it takes for the transition to finish.
- Timing function: The transition's softening and acceleration are controlled by the timing function. The terms ease, linear, ease-in, ease-out, and ease-in-out are frequently used.
- Delay: An optional time in seconds (s) or milliseconds (ms) before the transition begins.
Example:
Let's consider an example that illustrates the transition effect applied to the width property with a duration of 3 seconds.
Note: If you don't specify the duration part, the transition will have no effect because its default value is 0. The transition effect is started when you move the cursor over an element.
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 100px;
height: 100px;
background: orange;
-webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
transition: width 1s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<div></div>
<p>Move the cursor over the div element above to see the transition effect.</p>
</body>
</html>
Note: It gains its original style when you gradually remove the mouse cursor from the element.
CSS Multiple Transition Effect
It applies a transition effect to multiple CSS properties simultaneously. To apply a transition effect to multiple properties, simply list those properties separated by commas.
In this scenario, the transition impacts the dimensions and changes applied to the element.
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding:15px;
width: 150px;
height: 100px;
background: violet;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 300px;
height: 200px;
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
}
</style>
</head>
<body>
<div><b>C# Tutorial</b><p> (Move your cursor on me to see the effect)</p></div>
</body>
</html>
Shorthand Transition
By employing the transition property shorthand, you have the ability to specify various transition properties like the property itself, duration, timing function, and delay. This shorthand method not only simplifies the code but also makes it more concise.
Syntax:
The syntax for the shorthand property of transition is structured in the following manner:
element {
transition: property duration timing-function delay;
}
Example:
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: width 0.5s ease-in-out 0.2s;
}
.box:hover {
width: 200px;
}
In this scenario, the ease-in-out timing function will be applied to smoothly change the width attribute over a duration of 0.5 seconds, along with a 0.2-second pause, using the transition property shorthand.
Note: You can include several transition properties by separating each transition property with a comma.
CSS Transitional and Non-transitional Properties
- Certain CSS properties can be animated smoothly as they change states thanks to CSS transitions. These transitions are just available for certain kinds of characteristics.
- To create fluid effects like resizing, moving, and fading, numerical values can be seamlessly transitioned, including dimensions (width, height), spacing (margin, padding), font sizes (font size), and some positioning properties (top, right, bottom, left).
- Color, background, and border properties can also be transitioned to achieve uniform color changes. Transform attributes (such as transform, rotate, and scale) make animations like rotations and scaling possible.
- Not all properties, nevertheless, can be transferred. Transitioning is impossible for non-numeric attributes like visibility, location, and display. Additionally excluded from the range of possible transitions are attributes relating to text, font, background, content, and lists.
- To ensure consistent behavior, always test transitions in many browsers to ensure compatibility.
Understanding Transition Activation Triggers in CSS
Web components can now feature interactive motion effects through CSS transitions, with specific events initiating these effects. Transition triggers play a crucial role in defining the start of an animation, facilitating a seamless and visually appealing transition.
An example commonly seen is the :hover pseudo-class trigger.
The pseudo-classes and events listed below can cause state changes in your elements.
- :focus: matches if the element is focused;
- :hover: matches if the cursor is over the element.
- :focus-within: Matches if the element or its descendants are focused.
- :target: matches when the element's id and the fragment of the current URL match.
- :active: When an element is active (usually when the mouse is moved over it).
- Class change from JavaScript: CSS will transition any suitable attributes that have changed when the CSS class of an element changes via JavaScript.
Different Transitions for Entry or Exit
Modifying the transition properties for hover and focus states can result in captivating visual outcomes.
.my-element {
background-color: red;
transition: background-color 2000ms ease-in;
}
.my-element:hover,
.my-element:focus {
background-color: blue;
transition: background-color 150ms ease;
}
Specify the Speed Curve of the Transition
The timing-function property found within the transition property is utilized to define the speed curve of a transition. The calculation of values between the initial and final states of a transition over time is determined by the timing function applied. Within CSS, a range of predefined timing functions are available to produce different animation effects. It can be assigned the value:
- Ease (default): This timing function features acceleration in the middle phase followed by deceleration towards the end. This results in a smooth and organic animation appearance.
Example:
.element {
transition: width 0.5s ease;
}
.element:hover {
width: 400px;
}
- Continuous: The animation follows a steady and uniform movement pattern due to this timing function, ensuring a smooth and constant speed during the transition. Gradual: This timing characteristic initiates the transition slowly and accelerates rapidly towards the end, creating a perception of the element smoothly entering the transition.
Example:
.element {
transition: width 0.5s linear;
}
.element:hover {
width: 400px;
}
- Ease-in: This timing function initiates with a slow start and accelerates quickly towards the end, creating the effect of a smooth transition as if the element is gradually entering the scene.
Example:
.element {
transition: width 0.6s ease-in;
}
.element:hover {
width: 400px;
}
- Ease-out: This timing function initiates with a brisk pace and gradually decelerates towards the conclusion, creating the perception that the transition is gradually slowing down.
Example:
.element {
transition: width 0.6s ease-out;
}
.element:hover {
width: 400px;
}
- Ease-in-out: The ease-in-out timing function merges the characteristics of ease-in and ease-out to generate a seamless start, acceleration, deceleration, and conclusion.
Example:
.element {
transition: width 0.4s ease-in-out;
}
.element:hover {
width: 400px;
}
- Cubic Bezier: By leveraging cubic Bezier control points, you can craft distinct acceleration curves with this timing function. It offers precise control over the animation curve.
Example:
.element {
transition: width 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.element:hover {
width: 300px;
}
Browser Support to CSS Transitions Properties
Some popular web browsers that support CSS transitions are listed below:
- Google Chrome
- Mozilla Firefox
- Apple Safari
- Microsoft Edge (including EdgeHTML and Chromium-based versions)
- Opera
- Brave
- Vivaldi
- Samsung Internet
- UC Browser
It is important to highlight that despite the complete support for CSS transitions in contemporary browsers, it is advisable to verify the transitions across multiple browsers and versions to guarantee uniformity in functionality and visual presentation.