Transitions typically get used in combination with pseudo-classes like :hover or when a an element is being added to the screen or about to be removed from the screen.
The Transition needs several values: property to change, duration for the change, timing function, and a delay before starting.
By default the delay is set to zero.
For the property name we can either use the default keyword all or an actual property name.
The unit for duration and the delay is s, which stands for seconds.
li:hover{transition: all 0.4s linear;}p{background-color: #336699;/* starting value */transition: background-color 0.5s ease-out;}/* when the class "changed" is added to the paragraph the change
in background-color will be initiated. */p.changed{background-color: #6699cc;/* ending value */}