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/