CSS3 Animations
- 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.
- 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 |
| @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 |
Syntax 1: @keyframes rule or the animation property.
@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>
Syntax 2:
Change the background color and position:@keyframes myfirst
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
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-rotation </title>
<style type="text/css">
body{margin:0;padding:50px; background:#eee;color:#fff }
div
{
width:200px;
height:200px;
background: #663366;
position:relative;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div>Hello World.
<p> Hover over the div element above, to see the Animation effect.</p>
</div>
</body>
</html>
Syntax 3:
Change the background color when the animation is 25%, 50%, and again when the animation is 100% complete:@keyframes myfirst{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
Syntax 4:
Run an animation called myfirst, with all the animation properties set:div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}
Syntax 5:
The same animation as above, using the shorthand animation property:div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
}
No comments:
Post a Comment