HTML CSS Tutorials: CSS3 Transitions

CSS3 Transition is a fantastic feature of CSS3 which allows a animated effect to a division.This is achieved using the transition tag.

Copy and paste the below piece of code to know the effect

<head>
<br /><style type="text/css"> div{width:100px;
<br />height:100px;
<br />background:yellow;
<br />transition:width 2s, height 2s;
<br />-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
<br />-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
<br />-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
<br />}
<br />div:hover
<br />{
<br />width:200px;
<br />height:200px;
<br />transform:rotate(180deg);
<br />-moz-transform:rotate(180deg); /* Firefox 4 */
<br />-webkit-transform:rotate(180deg); /* Safari and Chrome */
<br />-o-transform:rotate(180deg); /* Opera */
<br />}</style></head><p><b>Note:</b> This example does not work in Internet Explorer.</p>
<br />
<br /><div>Hover over this to see the transition effect</div>

transition-property
Specifies the name of the CSS property to which the transition is applied

transition-duration
Defines the length of time that a transition takes. Default 0

transition-timing-function
Describes how the speed during a transition will be calculated. Default "ease"

transition-delay
Defines when the transition will start. Default 0

HTML CSS Tutorials

Pages

Wednesday, August 3, 2011

CSS3 Transitions

No comments:

Post a Comment

Followers

About Me