HTML and CSS Reference
In-Depth Information
In CSS, animation is achieved by defining a set of
keyframes
. Each frame defines one or more CSS attributes.
In this application you'll specify the appropriate background image but you could just as easily change the color
or size or any other CSS attribute. For each frame you also specify the % of the animation duration when this
frame should appear. You should always have a 0% and 100% frame, which specify the beginning and ending
properties. You can include any number of steps in between. In this example, there are eight images so the frames
will transition at 0%, 12%, 25%, 37%, 50%, 62%, 75%, 87%, and 100%.
Once you have dened the
keyframes
, you then then set the animation attributes on the element that you
want to animate. You'll specify the name of the
keyframes
by setting the
animation-name
attribute. You can also
set the duration (in seconds) that the animation will take using the
animation-duration
attribute. Add the code
shown in Listing 4-6 to the end of the style section.
Listing 4-6.
Defining the animation effect
/* Animate the moon phases */
@@-webkit-keyframes moonPhases
{
0% {background-image:url("images/moon1.png");}
12% {background-image:url("images/moon2.png");}
25% {background-image:url("images/moon3.png");}
37% {background-image:url("images/moon4.png");}
50% {background-image:url("images/moon5.png");}
62% {background-image:url("images/moon6.png");}
75% {background-image:url("images/moon7.png");}
87% {background-image:url("images/moon8.png");}
100% {background-image:url("images/moon1.png");}
}
@@keyframes moonPhases
{
0% {background-image:url("images/moon1.png");}
12% {background-image:url("images/moon2.png");}
25% {background-image:url("images/moon3.png");}
37% {background-image:url("images/moon4.png");}
50% {background-image:url("images/moon5.png");}
62% {background-image:url("images/moon6.png");}
75% {background-image:url("images/moon7.png");}
87% {background-image:url("images/moon8.png");}
100% {background-image:url("images/moon1.png");}
}
#moon
{
width:115px;
height:115px;
background-image: url("images/moon1.png");
background-repeat: no-repeat;
-webkit-animation-name:moonPhases;
-webkit-animation-duration:4s;
-webkit-animation-delay:3s;
-webkit-animation-iteration-count:10;
