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
Example 1
transition: background-color 1s ease-in;
(HOVER OVER ME)
Example 2
transition: background-color 1s ease-in;
(HOVER OVER ME)
Example 3
transition: background-color 1s ease-in;
(HOVER OVER ME)
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;}