issuhub.com

Pro CSS3 Animation

(Tuis.) #1 
Chapter 6 ■ CSS3 Keyframe animationS for Web Content

Creating a Fallback for Older Versions of Internet Explorer


The overflow: hidden part of the declaration will be read and followed by Internet Explorer (IE) 9 and earlier
versions, although the keyframe animation will not. This will obscure the other images, meaning that users of IE
before version 10 will not see them. This can be avoided with a conditional comment that delivers the visibility
of the images to those users as shown in Listing 6-17. (Note that IE 6, 7, and 8 will require JavaScript and a little
more CSS in order for the browsers to recognize HTML5 elements, such as

, discussed in Chapter 9.)


Listing 6-17. Conditional CSS to Make Images Viewable in an Earlier Versions of IE



A Caution Against Using Marquee Animation for Text


The tag has a long and rather dismal history, going all the way back to early versions of Internet
Explorer. Never a standardized element nor a part of any HTML spec, was commonly used to create a
scrolling “ticker tape” effect for text on web pages during the late 90s. Together with animated GIFs and blinking
text, , except in very specific contexts, became one of the hallmarks of bad web design.
While the naive designer might be tempted to use these techniques as a way of animating a text crawl, they
should be avoided. Design trends aside, marquee text has a number of usability issues:


•    The human visual system is attracted to movement and marquee text is in constant

motion; a marquee feature can be extremely distracting on a page.

•    For the same reason, marquee text can be very difficult to read, especially for users with

visual impairment.

•    Including links in marquee text makes a bad idea worse: links can be very difficult to

follow and click. As marquee text moves in a loop, missing a link means that the user

must wait until the next appearance of the link if they miss it the first time, which can

be extremely frustrating. For that reason, any important links that appear in a marquee

should also appear in a static form on the web page.

News Ticker/Notification Animation


Rather than using marquee to animate text, in this section you’ll create a news ticker sequence of alerts with
CSS3 Animation. Each new notification will stack at the bottom-right corner of the page, displaying for a certain
amount of time before disappearing. The user should be able to click each notification for more information, and
the time remaining for each panel will be shown in a progress bar. (See Figure 6-2.)

Get our desktop app
Company
Features
Documentation
Resources
© ISSUHUB. 2024. All rights reserved.