CSS transition – animation effect when properties change

CSS property transition can be used to create animation effect when other specified properties change. This can only be applied on animatable properties.

CSS property transition

CSS version: CSS 3
Value: single-transition [,single-transition]*
single-transition: none | [transition-property || transition-duration || transition-timing-function || transition-delay]
Initial: see individual properties
Applies to: all elements, :before and :after pseudo elements
Inherited: no
Few points to note:

  1. When transition value is none, multiple transition values cannot be specified.
  2. The values within single single-transition shorthand should be in order.

Example – transition

Change background-color on hover with transition effect.

In the following code, CSS property transition can be changed to the following values
  • background-color 2s ease
  • background-color 1s linear
<style type="text/css">
a:hover {
 background-color: lightblue;
}
a {
transition: background-color 2s ease;
}
</style>

<a href="#link1">Hover me to see transition in background-color</a>
transition refresh

Related

Specification and Browser compatibility

SpecificationStatusCategories
CSS3 TransitionsW3C Working DraftCSS3
Desktop
ChromeFirefoxIEEdgeSafariOpera
Yes 26+ Yes 16+ Yes 10+ Yes 12+ Yes 6.1+ Yes 12.1+
Mobile
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Yes 47+ Yes 44+ Yes 7.0-7.1+ Yes 10+ Yes 12.1+
source: caniuse.com
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments