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-propertythe property you want to transition. Only some properties are transitionable.
transition-durationin seconds or milliseconds: 4s or 4000ms
transition-timing-function“cushioning" for the transition, optional: defaults to ease
transition-delaythe number of milli/seconds to delay the transition before firing it, optional
The delay is always the second time measurement:
transition: color 2s 100ms;
100ms is the delay.
Exercise: Rolling a Ball
(Keep this exercise open in a new tab for later! Use the "edit on codepen" option.)