Meet CSS Transitions
A transition describes how a property should display change when given a different value. You need two ingredients to make a transition: property & duration. They looks like this:
transition: color 2s;
Or in long form:
transition-property: color; transition-duration: 2s;
Anatomy of a transition
transition-property
the property you want to transition. Only some properties are transitionable.transition-duration
in seconds or milliseconds: 4s or 4000mstransition-timing-function
“cushioning" for the transition, optional: defaults to easetransition-delay
the number of milli/seconds to delay the transition before firing it, optional
The delay is always the second time measurement:
transition: color 2s 100ms;
Here 100ms
is the delay.
Exercise: Rolling a Ball
(Keep this exercise open in a new tab for later! Use the "edit on codepen" option.)
See the Pen DIY Rolling a Ball with Transitions by Rachel Nabors, Teaching (@rachelnabors-teaching) on CodePen.