CSS Transition

The css transition property is a shorthand property used to represent up to four transition-related longhand properties:

 

CSS

.example {
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}

These transition properties allow elements to change values over a specified duration, animating the property changes, rather than having them occur immediately. Here is a simple example that transitions the background color of a <div> element on :hover:

 

CSS

div {
transition: background-color 0.5s ease;
background-color: red;
}
div:hover {
background-color: green;
}

That div will take half a second when the mouse is over it to turn from red to green. Here is a live demonstration of such a transition:

You can specify a particular property as we have above, or use a value of “all” to refer to transition properties.

 

CSS

div {
transition: all 0.5s ease;
background: red;
padding: 10px;
}
div:hover {
background: green;
padding: 20px;
}

In this above example, both background and padding will transition, due to the value “all” specified for the transition-property portion of the shorthand.

You may comma separate value sets to do different transitions on different properties:

 

CSS

div {
transition: background 0.2s ease,
padding 0.8s linear;
}

For the most part, the order of the values does not matter — unless a delay is specified. If you specify a delay, you must first specify a duration. The first value that the browser recognizes as a valid time value will always represent the duration. Any subsequent valid time value will be parsed as the delay.

Some properties cannot be transitioned because they are not animatable properties. See the spec for a full list of which properties are animatable.

By specifying the transition on the element itself, you define the transition to occur in both directions. That is, when the styles are changed (e.g. on hover on), they properties will transition, and when the styles change back (e.g. on hover off) they will transition. For example, the following demo transitions on hover, but not on hover off:

This happens because the transition has been moved to the :hover state selector and there is no matching transition on the selector that targets the element directly without the :hover state.

For compatibility in all supporting browsers, vendor prefixes are required, with the standard syntax declared last:

 

CSS

.example {
-webkit-transition: background-color 500ms ease-out 1s;
-moz-transition: background-color 500ms ease-out 1s;
-o-transition: background-color 500ms ease-out 1s;
transition: background-color 500ms ease-out 1s;
}

IE10 (the first stable version of IE to support transition) does not require the -ms- prefix.

581 total views, 1 views today

Loading Facebook Comments ...

No comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Enter the captcha code *

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.

Coupon Code "HAPPY10" - Get Discounts upto 90% + 10% off on Purchase of themes/templates and Plugins