Working with CSS3 Transitions
Interactivity is one of the important aspects of animation. Earlier, a combination of HTML,
CSS, and JavaScript were used to animate objects on the Web. In 2007, Apple introduced
the CSS transition, which later became a proprietary feature of Safari called CSS Animation.
Representatives from Apple and Mozilla began adding the CSS transitions module to the
CSS Level 3 specification, closely modeled on what Apple had already added to Webkit
and moz.
CSS, and JavaScript were used to animate objects on the Web. In 2007, Apple introduced
the CSS transition, which later became a proprietary feature of Safari called CSS Animation.
Representatives from Apple and Mozilla began adding the CSS transitions module to the
CSS Level 3 specification, closely modeled on what Apple had already added to Webkit
and moz.
All the browsers do not support CSS3 transitions. Browsers that support CSS3 Transitions
are as follows:
Apple Safari 3.1 and later which requires the prefi –webkitGoogle Chrome which requires the prefi –webkitMozilla Firefox 3.7 alpha and later which requires the prefi –mozOpera 10.5x and later which requires the prefi –oAt the moment Internet Explorer 9 does not support CSS3 Transitions.
For performing CSS transitions the two required specification are as follows:
The CSS property that needs the effect
The duration of the effect
Code Snippet 11 demonstrates the use of transition effect on the width property for 3
seconds.
are as follows:
Apple Safari 3.1 and later which requires the prefi –webkitGoogle Chrome which requires the prefi –webkitMozilla Firefox 3.7 alpha and later which requires the prefi –mozOpera 10.5x and later which requires the prefi –oAt the moment Internet Explorer 9 does not support CSS3 Transitions.
For performing CSS transitions the two required specification are as follows:
The CSS property that needs the effect
The duration of the effect
Code Snippet 11 demonstrates the use of transition effect on the width property for 3
seconds.
Code Snippet 11:
div
{
transition: width 3s;
-moz-transition: width 3s; /* Firefox 4 */
-webkit-transition: width 3s; /* Safari and Chrome */
-o-transition: width 3s; /* Opera */
}
The effect will start when the specified CSS property changes value. The CSS property
changes its value typically when a user moves a mouse over an element. Thus, the user can
set the hover for <div> elements. Code Snippet 12 demonstrates the same.
Code Snippet 13:
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
div
{
width:100px;
height:100px;
background:#000000;
transition-property:width;
transition-duration:2s;
transition-timing-function:linear;
transition-delay:1s;
/* Firefox 4 */
-moz-transition-property:width;
div
{
transition: width 3s;
-moz-transition: width 3s; /* Firefox 4 */
-webkit-transition: width 3s; /* Safari and Chrome */
-o-transition: width 3s; /* Opera */
}
The effect will start when the specified CSS property changes value. The CSS property
changes its value typically when a user moves a mouse over an element. Thus, the user can
set the hover for <div> elements. Code Snippet 12 demonstrates the same.
Code Snippet 13:
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
div
{
width:100px;
height:100px;
background:#000000;
transition-property:width;
transition-duration:2s;
transition-timing-function:linear;
transition-delay:1s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:2s;
-moz-transition-timing-function:linear;
-moz-transition-delay:1s;
/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:2s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:1s;
}
div:hover
{
width:500px;
}
</style>
</head>
<body>
<p><b>Note:</b> The example</p>
<div></div>
<p>Hover over the div element above, to see the transition effect.</
p>
<p><b>Note:</b> The transition effect will wait 1 seconds before
starting.</p>
</body>
</html>
-moz-transition-timing-function:linear;
-moz-transition-delay:1s;
/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:2s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:1s;
}
div:hover
{
width:500px;
}
</style>
</head>
<body>
<p><b>Note:</b> The example</p>
<div></div>
<p>Hover over the div element above, to see the transition effect.</
p>
<p><b>Note:</b> The transition effect will wait 1 seconds before
starting.</p>
</body>
</html>
.png)
