Pro CSS3 Animation

■ Contents

x

News Ticker/Notification Animation ..................................................................................... 93

A Lightbox Image Gallery Equivalent in CSS3 ...................................................................... 97

Adding Captions ........................................................................................................................................... 99

Logo Animation on Page Load ............................................................................................ 101

Summary ............................................................................................................................ 102

■ Chapter 7: Integrating CSS3 Animations with SVG and Filters �������������������������������� 103

An Introduction to SVG ....................................................................................................... 103

Placing SVG on a Web Page................................................................................................ 104

SVG As an Inline Image .............................................................................................................................. 104

Inline SVG .................................................................................................................................................. 105

SVG Added As an Object or iframe ............................................................................................................. 106

Manipulating SVG with CSS ................................................................................................ 106

An Animated SVG Imagemap ..................................................................................................................... 108

SVG Snowflake Animation ......................................................................................................................... 110

Tools for SVG ...................................................................................................................... 112

Introduction to CSS3 Filters ....................................................................................................................... 113

Summary ............................................................................................................................ 115

■ Chapter 8: Integrating CSS3 Animation with Responsive Web

Design and JavaScript ��������������������������������������������������������������������������������������������� 117

Resizing Elements in Responsive Web Design Without Transitions .................................... 118

Dynamically Resizing Images and Videos .................................................................................................. 118

Responsive Background Images ............................................................................................................... 120

Resizing Elements in Responsive Web Design with Transitions ......................................... 121

Indicating Viewport Size with CSS3 Media Queries and Transitions .................................. 123

Optimizing CSS Transitions and Animations for Mobile Devices ........................................ 124

Integrating CSS3 Media Queries with SVG ......................................................................... 125

Triggering CSS3 Transitions with JavaScript ...................................................................... 127

Customizing CSS3 Transitions with JavaScript .................................................................. 131

Summary ............................................................................................................................ 133