Transition

Shorthand to set the 4 transition properties:

element { transition: Transition-property Duration Timing-function Delay  ; }

Transition must be triggered by some activity like :hover or :focus

To apply multiple transitions to the same element, list them in sets, with each set of 4 properties comma separated from the next.

This shorthand is equivalent to the following:

element {
  transition-property property;
  transition-duration: time;
  transition-timing-function: timing;
  transition-delay: delay;
}

If not specified the timing-function and delay will default to ease and 0.

Examples:
h1 { transition: background 3s; }
.emw3class { transition: width 2s, font-style 1s; }
#emw3id { transition: height 2.5s ease, width 2.5s ease; }

Try it:

(CSS 3) Browser Support: All major browsers including IE 10. For older versions, use the equivalent -moz-transition for Firefox and -webkit-transition for Safari and Chrome.

“The world wonders” was a phrase used as security padding in an encrypted message sent during the Battle of Leyte Gulf on October 25, 1944”

Related:

transition-property - Apply a transition effect to one or more CSS properties.
transition-duration - The time a CSS transition effect takes to complete.
transition-timing-function - Speed curve of the transition effect.
transition-delay - Delay before the CSS transition is displayed.