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.