CSS3: The Missing Manual by David Sawyer McFarland

Author:David Sawyer McFarland [David Sawyer McFarland]
Language: eng
Format: epub, mobi
Tags: COMPUTERS / Web / Page Design
ISBN: 9781449339470
Publisher: O'Reilly Media
Published: 2012-12-17T16:00:00+00:00

Note

You don’t need the -ms- vendor prefix for Internet Explorer in this case. IE 9 and earlier don’t understand CSS animations anyway, and IE 10 supports the @keyframes syntax without a prefix.

Applying an Animation

Once you’ve completed a set of keyframes, the animation is ready. However, to make it work, you need to apply it to an element on your page. You can add an animation to any style for any element on a page. If you simply add the animation to a style that applies immediately to an element—for example, an h1 tag style—the animation will apply when the page loads. You can use this technique to add an introductory animation to a page that makes a logo zoom into place in the page’s upper-left, or make a particular box of content glow to draw attention to it.

In addition, you can apply an animation to one of the pseudo-classes, including :hover, :active, :target, or :focus to make an animation run when a visitor mouses over a link, for example, or clicks into a form field. Finally, you can apply the animation to a class style and use JavaScript to dynamically apply that class in response to a visitor clicking a button or some other page element (see the box on Using JavaScript to Trigger Transitions).

CSS3 provides a handful of animation-related properties to control how and when an animation plays back (as well as a shorthand version that encompasses all the individual properties). At a minimum, to get an animation running, you need to supply the name you gave the original animation (in the @keyframes rule as discussed on Defining Keyframes), and a duration for the animation.

Here’s a simple example. Say you want a div with an important announcement to fade into view when the page loads. You’ve given that div a class name of announcement: -<div class=“announcement”>.

Create the fade-in animation with the @keyframes rule:

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.