Pro CSS3 Animation

■ Contents

ix

Animating Custom Validation Errors for HTML5 Forms ........................................................ 63

UI Button Depress Transition ................................................................................................ 66

UI Button Reveal Transition .................................................................................................. 67

Accessible Horizontal Drop-down Navigation with CSS3 Transitions ................................... 69

Initiating CSS3 Transition Effects After a Button Click .......................................................... 70

Animating Form Elements with CSS3................................................................................... 73

Summary .............................................................................................................................. 74

■ Chapter 5: CSS3 Keyframe Animations ��������������������������������������������������������������������� 75

Keyframes and Tweening ..................................................................................................... 75

CSS3 Keyframe Animation Syntax ........................................................................................ 76

Support for Keyframe Animation in Older Browsers............................................................. 77

Controlling Keyframe Animation Playback ........................................................................... 78

Blending and Chaining Keyframe Animations ...................................................................... 79

Repeating Animation Sequences .......................................................................................... 80

Pausing Keyframe Animations.............................................................................................. 83

Summary .............................................................................................................................. 83

■ Chapter 6: CSS3 Keyframe Animations for Web Content ������������������������������������������� 85

A Simple CSS3 Slideshow .................................................................................................... 85

The HTML Code ............................................................................................................................................ 85

A Variation with Background Images ........................................................................................................... 87

Pausing the Slideshow ......................................................................................................... 88

Altering the Transition Between Images ............................................................................... 88

Fade-In-Out ................................................................................................................................................. 88

Fade-In-Out During Motion .......................................................................................................................... 89

CrossFade .................................................................................................................................................... 90

Adding Captions ........................................................................................................................................... 91

An On-Click Method for Pause ..................................................................................................................... 92

Creating a Fallback for Older Versions of Internet Explorer ......................................................................... 93

A Caution Against Using Marquee Animation for Text .......................................................... 93