Introduction
From W3School:
With CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts.
Try it
Try the sample below with modern browsers (FF 18, Chrome, etc)
mouse over to test
The HTML
Here we change 3 different properties width, height and border-color with different transition properties, separated by comma.
<html>
<head>
<style>
.block {
border: 1px solid green;
width: 100px;
height: 100px;
}
.block:hover {
width: 500px;
height: 350px;
border-color: red;
/* property duration timing-function delay */
/* width ->change width smoothly */
/* 2s -> change it smoothly in 2 seconds */
/* ease-out -> slow end */
/* 0.5s -> delay 0.5 second at the begining */
/* separate different properties by comma */
/*
/* similarly */
/* change height smoothly in 1.5 seconds with 1 second delay, slow start */
/* change border-color smoothly in 1 second with 1.5 seconds delay, slow end */
-webkit-transition: width 2s ease 0.5s, height 1.5s ease-in 1s, border-color 1s ease-out 1.5s;
-moz-transition: width 2s ease 0.5s, height 1.5s ease-in 1s, border-color 1s ease-out 1.5s;
-o-transition: width 2s ease 0.5s, height 1.5s ease-in 1s, border-color 1s ease-out 1.5s;
transition: width 2s ease 0.5s, height 1.5s ease-in 1s, border-color 1s ease-out 1.5s;
}
/* return to original style smoothly while mouseout */
.block:not(hover) {
-webkit-transition: width 2s, height 2s , border-color 2s;
-moz-transition: width 2s, height 2s , border-color 2s;
-o-transition: width 2s, height 2s , border-color 2s;
transition: width 2s, height 2s , border-color 2s;
}
</style>
</head>
<body>
<div class="block">
mouse over to test
</div>
</body>
</html>The Result
View demo on line
http://screencast.com/t/myM87X1NtuX
Reference
http://www.w3schools.com/css3/css3_transitions.asp
http://stackoverflow.com/questions/9670075/css-transition-shorthand-with-multiple-properties
Download
CSS3_transition.swf
https://github.com/benbai123/HTML_CSS_Javascript_practice/blob/master/CSS3/demo/CSS3_transition.swf
transition_test.html
https://github.com/benbai123/HTML_CSS_Javascript_practice/blob/master/CSS3/transition_test.html
No comments:
Post a Comment