Apply a transition effect to one or more CSS properties.

      transition-property: property | all | none  ;

property - A comma separated list of CSS property names that the transition effects will apply to.
all - Apply transition effects to all the changed properties.
none - Don't apply any transition effects. (default)

The transition must be triggered by some activity like :hover or :focus or triggered via JavaScript.

h1 { transition-property: background; }
.emw3class { transition-property: width,height,background; }

#emw3id { transition-property: all; }

Try it:

This sample has a MouseOver / :hover style that changes the height and width and adds a red background.
{width: 500px; height: 300px; background: red;}
Reload the page to restart.

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

“Life is pleasant. Death is peaceful. It's the transition that's troublesome” ~ Isaac Asimov


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.
transition - Shorthand to set the four transition- properties.
transform - Apply a 2D or 3D transformation to an element.

Copyright © 2013-2022
Some rights reserved