HTML and CSS Reference
In-Depth Information
animation-name:moonPhases;
animation-duration:4s;
animation-delay:3s;
animation-iteration-count:10;
}
This code sets the total duration at 4 seconds so the image should transition every ½ second. It also specifies
to wait 3 seconds before starting and to repeat the animation 10 times. When you refresh the web page, after
about 3 seconds it should cycle through the phases of the moon as shown in Figure 4-16 .
Figure 4-16. Animating the moon's phases
here are two other animation properties that were not applicable here, timing-function and direction .
If you're using a simple animation and only define the begin and end values, the timing-function denes the
speed of the transition. For example, if you're moving an element to a different position, setting this to linear will
move the object at a constant rate. However, using the default value, ease, the transition will start out slow and
then speed up and then slow down near the end. There are other options, like ease-in which will start out slow
and then speed up for the remainder of the transition. The direction property, if set to alternate, will reverse the
transition on alternating iterations. The default value, normal, will replay the exact same transition each time.
The complete style element is shown in Appendix B.
Summary
In this chapter I covered a lot of information about CSS, especially the new features in CSS3. The selectors are
quite powerful giving a great deal of flexibility in applying styles. Prior to CSS3 much of this had to be done with a
lot of JavaScript functions. I also showed you how to plan and structure a sample web page using a lot of the new
structural HTML5 elements.
Using the WebMatrix application you created a simple web page, defined the basic structure and then
populated the content. Using some if the new CSS3 features you then added some significant style features
including:
Rounded borders
Gradients
Tables
Multiple columns
 
Search WWH ::




Custom Search