Pro CSS3 Animation

(Tuis.) #1

Chapter 6 ■ CSS3 Keyframe animationS for Web Content


The markup for this is fairly simple: the notifications are div elements contained in a larger div, with each
progress bar as a div with a span inside it, as shown in Listing 6-18.


Figure 6-2. News ticker driven with CSS3


What aBOUt the prOGreSS eLeMeNt?

htmL5 has markup for displaying the time of a process: the element. While you can style the

progress element in the way you want, you cannot use CSS to modify the progress shown visually in the tag

(that’s JavaScript). Such a task is outside the bounds of this chapter, as we’re using CSS3 for every feature

where possible, so it is not an appropriate element to use in this case.
Free download pdf