7.0: Transitions

CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. Animations that involve transitioning between two states are often called implicit transitions as the states in between the start and final states are implicitly defined by the browser. The easiest way for determining styles for different states is by using the :hover, :focus, :active, and :target pseudo-classes.

The transition property is a shorthand property used to represent up to four transition-related longhand properties:

.example {
    transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}

CSS Transition Properties

The following table lists all the CSS transition properties:

Property

Description

transition

A shorthand property for setting the four transition properties into a single property.

transition-delay

Specifies a delay (in seconds) for the transition effect.

transition-duration

Specifies how many seconds or milliseconds a transition effect takes to complete.

transition-property

Specifies the name of the CSS property the transition effect is for.

transition-timing-function

Specifies the speed curve of the transition effect.

RESOURCES

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
https://css-tricks.com/almanac/properties/t/transition/
https://www.w3schools.com/css/css3_transitions.asp
https://learn.shayhowe.com/advanced-html-css/transitions-animations/

Last updated