CSS Transition Property

What is CSS Transition Property?

The CSS transitions are effects that are added to change the element gradually from one style to another without using Flash or JavaScript.

Components of CSS Transitions

Transition Properties and Duration: Specify the CSS property, such as width, height, color, and others, that you want to animate.

Use time units like seconds (s) or milliseconds (ms) to define the length of the transition effect.

Getting the transition Started: By default, when a user hovers over an element, a transition starts.

For even greater control, the transition can also be started using JavaScript.

NOTE: IE9 and earlier versions do not support the transition property.

How CSS Transitions Work?

The CSS transition property allows you to specify which CSS properties you want to transition, along with the timing function and length of the transition. The transition gracefully interpolates the property values from the initial state to the target state whenever the specified property changes, such as when a class is added or hovered over.

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 take an example that defines the transition effect on width property and 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 adds a transition effect for more than one CSS property. If you want to add a transition effect on more than one property, separate those properties with a comma.

Example: Here, the transition affects width, height, and transformation.

<!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>JavaTpoint.com</b><p> (Move your cursor on me to see the effect)</p></div>  
</body>  
</html>  

Shorthand Transition

Using the transition property shorthand, you can define many transition properties, such as the property, duration, timing function, and delay. The code is made easier to understand and shorter by using this shorthand.

Syntax:

The transition property shorthand's syntax is as follows:

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 case, the ease-in-out timing function will be utilized to transition the width property for 0.5 seconds with a 0.2-second delay utilizing 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 elements now have dynamic animations thanks to CSS transitions, and particular triggers start these animations. Transition triggers determine when the animation begins, enabling a smooth visual change.

A typical example of such a trigger is the :hover pseudo-class.

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

Changing the transition settings for hover and focus can have some fascinating effects.

.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 included in the transition property is used to specify a transition's speed curve. How the values between a transition's starting and ending states are computed throughout time depends on the timing function. In CSS, many predefined timing functions can create various animation effects. It can have the following values:

Easy (default): This timing function accelerates in the middle before slowing down in the final stages. The animation seems natural and fluid.

Example:

.element {
  transition: width 0.5s ease;
}
.element:hover {
  width: 400px;
}

Linear: The animation is consistent and mechanical since this timing function maintains a constant pace throughout the transition.ease-in: This timing feature begins gradually and picks up speed swiftly toward the finish, giving the impression that an element is "easing into" the transition.

Example:

.element {
  transition: width 0.5s linear;
}
.element:hover {
  width: 400px;
}

Ease-in: This timing feature begins gradually and picks up speed swiftly toward the finish, giving the impression that an element is "easing into" the transition.

Example:

.element {
  transition: width 0.6s ease-in;
}
.element:hover {
  width: 400px;
}

Ease-out: This timing function begins quickly and slows towards the end, giving the impression that the transition is "easing out" somehow.

Example:

.element {
  transition: width 0.6s ease-out;
}
.element:hover {
  width: 400px;
}

Ease-in-out: This timing function combines ease-in and ease-out features to produce a smooth beginning, acceleration, deceleration, and end.

Example:

.element {
  transition: width 0.4s ease-in-out;
}
.element:hover {
  width: 400px;
}

Cubic-bezier: Utilising cubic Bezier control points, you may design unique acceleration curves using this timing function. The animation curve can be controlled precisely by it.

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 should be noted that even while CSS transitions are fully supported in these modern browsers, it's always a good idea to test your transitions across many browsers and versions to ensure consistency in behavior and appearance.

Next TopicCSS Tooltips

← prev next →