CSS Transitions

With CSS3, transitions such as fading in and outare possible. Transitions are useful and require less JavaScript or JQuery on the website, however they have a drawback: browser compatibility. Most modem browsers will support transitions but this is not the case with older browsers.

Syntax

transition:property time ease-in/out

The property can be anything such as width, height, background color, and the time in seconds. You must specify how the long the transition is, as the default is 0 so the transition will not work if you do not change it. As before, you may need the prefix with some browsers.

Syntax (Firefox)

-moz-transition:property time ease-in/out

Syntax (IE)

-ms-transition:property time ease-in/out

Syntax (Safari, Chrome)

-webkit-transition:property time ease-in/out

Examples – CSS Transitions

Code – Example 1

div.transitiona{background-color: rgb(255, 255, 144);}

div.transitiona:hover{-moz-transition: background-color 1s ease-in;-ms-transition: background-color 1s ease-in;-webkit-transition: background-color 1s ease-in;transition: background-color 1s ease-in;background-color: #f19f65;}

Code – Example 2

div.transitionb{background-color:#ff9a9a;-moz-transition: background-color 1s ease-in;-ms-transition: background-color 1s ease-in;-webkit-transition: background-color 1s ease-in;transition: background-color 1s ease-in;}

div.transitionb:hover{-moz-transition: background-color 1s ease-in;-ms-transition: background-color 1s ease-in;-webkit-transition: background-color 1s ease-in;transition: background-color 1s ease-in;background-color: #ff2626;}

Code – Example 3

div.transitionc{background-color: #f19f65;}

div.transitionc:hover{-moz-transition: height 1s ease-in;-ms-transition: height 1s ease-in;-webkit-transition: height 1s ease-in;transition: height 1s ease-in;height: 250px !important;}