Apply a transition effect to one or more CSS properties.
Syntax
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.
Examples:
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
Related:
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.