CSS Transitions - Creating Motion on the HTML Page
Ahhhh, transitions! This is where we get into seeing some real motion on our HTML pages by animating over time. Transitions and keyframes, which come a little later, really start making the animations come alive.
Transition properties allow elements to change values over a specified duration, animating the property changes, rather than having them occur immediately.1
The syntax for transitions is as follows:1
transition: property | duration | timing-function | delay;
Let's look at all the values to the right of transition to see what they mean.
The property value of a transition is the name of the CSS property that you want to animate over time.1
How long it takes for the animation to finish.
In traditional animations, ease defines the starting and stopping motion of an animation.
The timing-function has to do with the style of the animation. This is where easing comes into play.
The delay is the pause that the animation has before it begins.
1. “Using CSS Transitions - CSS: Cascading Style Sheets: MDN.” CSS: Cascading Style Sheets | MDN, MDN Web Docs, https://developer.mozilla.org/en-US/...SS_transitions.