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)
This blog explains the details of most popular technological details. This helps to learn about what are all the different method is there. And the working methods all of that are explained here. Informative blog.
ReplyDeleteschool prospectus design uk | School Prospectus UK
wonderful tips about web designing and much informative. its more helpful to get the how webdesigner makes them growing fast company for this field. i got some ideas from your point but not having clear idea about square space? will you explain about it?
ReplyDeleteGMAT classes chennai