CSS3 Animations
Internet Explorer and Opera do not yet support the @keyframes rule or the animation property.
Firefox requires the prefix -moz-, while Chrome and Safari require the prefix -webkit-.
CSS3 @keyframes Rule
To create animations in CSS3, you will have to learn about the @keyframes rule.
The @keyframes rule is where the animation is created. Specify a CSS style inside the @keyframes rule and the animation will gradually change from the current style to the new style.
@keyframes myfirst{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>animation-backcolor </title>
<style type="text/css">
body{margin:0;padding:50px; background:#eee; }
div
{
width:300px;
height:300px;
background:#663399;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
75%{background:white;}
100% {background:green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
75%{background:white;}
100% {background:green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
75%{background:white;}
100% {background:green;}
}
</style>
</head>
<body>
<div>Hello World. Hover over the div element above, to see the transition effect.
<p><b>Note:</b> This example does not work in Internet Explorer and Opera.</p>
<p><b>Note:</b> When an animation is finished, it changes back to its original style.</p>
</div>
</body>
</html>
- An animation is an effect that lets an element gradually change from one style to another.
- With CSS3, we can create animations, which can replace animated images, Flash animations, and JavaScripts in many web pages.
- You can change as many styles as many times as you want.
- Specify when the change will happen in percent, or the keywords "from" and "to", which is the same as 0% and 100%.
- 0% is the beginning of the animation, 100% is when the animation is complete.
- For best browser support, you should always define both the 0% and the 100% selectors.
- When the animation is created in the @keyframe, bind it to a selector, otherwise the animation will have no effect.
- Bind the animation to a selector by specifying at least these two CSS3 animation properties:
- Specify the name of the animation
- Specify the duration of the animation
Browser Support
Internet Explorer and Opera do not yet support the @keyframes rule or the animation property.
Firefox requires the prefix -moz-, while Chrome and Safari require the prefix -webkit-.
CSS3 @keyframes Rule
To create animations in CSS3, you will have to learn about the @keyframes rule.
The @keyframes rule is where the animation is created. Specify a CSS style inside the @keyframes rule and the animation will gradually change from the current style to the new style.
The following table lists are the @keyframes rule and all the animation properties:
Property Description
Property Description
- @keyframes - Specifies the animation
- animation - A shorthand property for all the the animation properties, except the animation-play-state property
- animation-name - Specifies the name of the @keyframes animation
- animation-duration - Specifies how many seconds or milliseconds an animation takes to complete one cycle. Default 0
- animation-timing-function - Describes how the animation will progress over one cycle of its duration. Default "ease"
- animation-delay - Specifies when the animation will start. Default 0
- animation-iteration-count -Specifies the number of times an animation is played. Default 1
- animation-direction- Specifies whether or not the animation should play in reverse on alternate cycles. Default "normal"
- animation-play-state - Specifies whether the animation is running or paused. Default
@keyframes myfirst{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>animation-backcolor </title>
<style type="text/css">
body{margin:0;padding:50px; background:#eee; }
div
{
width:300px;
height:300px;
background:#663399;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
75%{background:white;}
100% {background:green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
75%{background:white;}
100% {background:green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
75%{background:white;}
100% {background:green;}
}
</style>
</head>
<body>
<div>Hello World. Hover over the div element above, to see the transition effect.
<p><b>Note:</b> This example does not work in Internet Explorer and Opera.</p>
<p><b>Note:</b> When an animation is finished, it changes back to its original style.</p>
</div>
</body>
</html>
No comments:
Post a Comment