In this article, we will learn about Transitions in CSS.

Transitions in CSS

When changing CSS properties, CSS transitions allow you to control the animation speed. Instead of having changes to property take effect immediately, you can have the changes take effect over time.

For example, changing the color of an element from white to black is usually instantaneous. Changes occur at time intervals that follow an acceleration curve when CSS transitions are enabled, and all of this can be customized.

The states in between the start and final states are implicitly defined by the browser, so animations that involve transitioning between two states are often referred to as implicit transitions.

A CSS transition instructs the browser to draw intermediate states between the initial and final states, providing a smooth transition for the user.

CSS transitions let you specify which properties to animate (by explicitly listing them) when the animation will begin (by specifying a delay), how long the transition will last (by specifying a duration), and how the transition will run (by specifying a method) (by defining a timing function).

Customizing an CSS Transition

To make a CSS Transition, we must have to specify two things:

• The CSS property, we want to add transition to.
• the duration of the effect.

After this, we can control the individual components using the below transition properties:

Properties of CSS Transition

transition-property

The transition property is used to specify the name or names of the CSS properties that should be affected by transitions. During transitions, only the properties listed here are animated; all other properties are changed instantly as usual.

To select all properties at a time we use all values for this property.

Syntax:

selector {
          transition-property: none|all|property|initial|inherit;
          }

Example:

div {
     transition-property: width;
     }

transition-duration

The transition-duration property sets the time span for which transitions should take place. You can specify a single duration for all properties during the transition, or multiple values to allow each property to transition at its own pace.

Syntax:

selector {
          transition-duration: time|initial|inherit;
          }

Example:

div {
     transition-duration: 5s;
     }

transition-timing-function

The transition-timing function is used to define how would the intermediate values for properties are computed using a function. Timing functions determine how the transition’s intermediate values are calculated. The graph of the corresponding function, as defined by four points defining a cubic bezier, can be used to specify most timing functions. You can also use the Easing Functions Cheat Sheet to select easing.

Syntax:

selector {
          transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;
          }

Example:

div {
     transition-timing-function: ease-in-out;
     }

transition-delay

The transition-delay property specifies a delay before animation begins.

The transition delay is specified in seconds (s) or milliseconds (ms) (ms).

Syntax:

selector {
          transition-delay: time|initial|inherit;
          }

Example:

div {
     transition-delay: 3s;
     }

Then we have the CSS Transition Shorthand property in which we can define all the transition properties at a single time.

Transition Shorthand Property

The Transition shorthand property is used to specify multiple animations properties at a single time using the transition keyword.

Syntax:

selector {
          transition: property duration timing-function delay;
          }

Example:

div {
      background-color: green;
      height: 70px;
      width: 200px;
      transition: all 2s ease-in-out 0.5s;
      }

div:hover {
            background-color: #007a4d;
            height: 100px;
            width: 300px;
            border-radius: 20px;
            }

Output:

Hover on the box, to see the transition.

That’s all about the Transitions in CSS.

You may like Animations in CSS | Web Development.

Hope this article will guide you to recognize all about the Transitions in CSS that you needed and still if you have any problem or queries regarding this, post them in the comments section and we will be glad to assist you.