CSS transitions allow you to animate changes in CSS property values smoothly over a specified duration. They provide a way to create simple animations without the need for JavaScript or complex frameworks.

CSS transitions are defined using the transition property and can be applied to various CSS properties.

The Key aspects of the CSS Transistions are discussed in the detailed manner below.

Transition Property

The transition property is used to specify the CSS properties that should be animated. It accepts a comma-separated list of property names or the value "all" to animate all properties.

.element { transition: width 1s, color 0.5s; }

Transition Duration

The transition-duration property sets the duration over which the transition effect occurs. It takes a value in seconds (s) or milliseconds (ms).

.element { transition-duration: 1s; }

<img src="https://images.codingblocks.com/web/CSS%20Transistions.webp? height="250px" width="350px">

Transition Timing Function

The transition-timing-function property defines the speed curve of the transition effect. It allows you to control the acceleration and deceleration of the animation.

There are several predefined timing functions available, such as linear, ease, ease-in, ease-out, and ease-in-out, or you can define a custom cubic Bézier curve using the cubic-bezier() function.

.element { transition-timing-function: linear; transition-timing-function: ease; transition-timing-function: ease-in; transition-timing-function: ease-out; transition-timing-function: ease-in-out; }

Transition Delay

The transition-delay property specifies a delay before the transition effect starts. It accepts a value in seconds (s) or milliseconds (ms).

.element { transition-delay: 0.5s; }

Transition Shorthand

The transition property can be specified as a shorthand to set the transition-property, transition-duration, transition-timing-function, and transition-delay in a single declaration.

.element { transition: width 1s ease-in-out 0.5s; }

Triggering Transitions

To trigger a transition, you need to change the CSS property value. This can be done through CSS pseudo-classes like :hover, :focus, :active, or by adding/removing CSS classes using JavaScript.

.element { width: 100px; transition: width 1s; }
.element:hover { width: 200px; }