Transition: a shorthand property for setting the 4 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.
Properties that you can change include width, height, color, background-color, border-radius, opacity, etc.
Review the 7 demos below to see transition properties in action.
After you complete the video, please leave a comment (on YouTube) to indicate that you have completed this step. If you posted your project on CodePen or GitHub then you can leave a link to your project in the comments. (no other links allowed).
Spend some time playing around with the different settings of CSS animation transition properties before moving ahead.