Transition

transition in CSS

In CSS, transitions are a way to create smooth animations between the changes in the property values of an element. Transitions are applied to a CSS property and define the duration, timing function, and other aspects of how the property should change over time.

The basic syntax for creating a transition in CSS is as follows:

cssCopy codeselector {
  transition: property duration timing-function delay;
}

The selector specifies the element(s) to which the transition should be applied.
The the property specifies the CSS property that should be transitioned.
The duration specifies the length of time (in seconds or milliseconds) that the transition should take to complete.
The timing function specifies the acceleration curve of the transition, which can be one of several predefined functions or a custom one.
The delay specifies the length of time (in seconds or milliseconds) to wait before starting the transition.

Here is an example of a simple CSS transition that changes the background color of a button when it is hovered over:

cssCopy codebutton {
  background-color: red;
  transition: background-color 0.5s ease-in-out;
}

button:hover {
  background-color: blue;
}

In this example, when the button is hovered over, the background color will smoothly transition from red to blue over a duration of 0.5 seconds with an ease-in-out timing function.

Transition

Table of contents

No headings in the article.