Pro CSS3 Animation

178 Pages·2020·8.04 MB·English

For your convenience Apress has placed some of the front
matter material after the index. Please use the Bookmarks

and Contents at a Glance links to access them.

v

Contents at a Glance

About the Author ��������������������������������������������������������������������������������������������������������� xiii

Introduction ������������������������������������������������������������������������������������������������������������������ xv

Chapter 1: CSS3 Fundamentals

■
�����������������������������������������������������������������������������������1

Chapter 2: CSS3 Transforms and Transitions

■
��������������������������������������������������������������9

Chapter 3: CSS3 Transitions for Images

■
��������������������������������������������������������������������31

Chapter 4: CSS3 Transitions for UI Elements

■
�������������������������������������������������������������57

Chapter 5: CSS3 Keyframe Animations

■
���������������������������������������������������������������������75

Chapter 6: CSS3 Keyframe Animations for Web Content

■
�������������������������������������������85

Chapter 7: Integrating CSS3 Animations with SVG and Filters

■
��������������������������������103

Chapter 8: Integrating CSS3 Animation with Responsive Web

■

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

Chapter 9: CSS3 3D Transforms, Transitions, and Animations

■
�������������������������������135

Chapter 10: Tools, Technologies, and the Future of CSS Animation

■
������������������������155

Index ���������������������������������������������������������������������������������������������������������������������������167

xv

Introduction

Welcome to Pro CSS3 Animation. This book teaches you how to use the full power of CSS to bring your web
content to life with interactivity and a fresh visual approach. In the chapters that follow, you’ll learn how to use
cutting-edge industry standards to increase the visual appeal, accessibility, and popularity of your site.

Who This Book Is For

This book is designed for designers and coders with at least a few years of experience in web development
who wish to rapidly upgrade their skills to the new W3C standards, or who desire to take their explorations
of CSS Transforms, Transitions, and Animations in bold new directions. It is not an introductory web design
text: the book assumes at least a basic understanding of HTML, CSS, and JavaScript. As web development is a
multidisciplinary process, I’ll also be addressing issues such as accessibility and semantics, concepts that the
reader should be familiar with.

How This Book Is Structured

I’ve split the book into ten chapters. The first chapters introduce the fundamental components of CSS animation,
while later chapters integrate animation with other web technologies.
Chapter 1 introduces CSS3, detailing its syntax and development and contrasting it with previous
technologies.
Chapter 2 covers CSS3 Transforms and Transitions.
Chapter 3 shows how to use CSS3 Transitions with images, including gallery effects.
Chapter 4 integrates transitions with site user interaction elements such as buttons and menus.
Chapter 5 introduces the CSS Animation module.
Chapter 6 uses CSS3 Animations on all kinds of web content.
Chapter 7 shows how to integrate CSS3 Transitions and Animations with Scalable Vector Graphics (SVG)
and CSS Filters.
Chapter 8 brings responsive web design and JavaScript together with CSS Animations.
Chapter 9 takes Transforms, Transitions, and Animations into the third dimension.
Chapter 10 looks to the future of web standards for visual effects and the various tools that can be used to
streamline CSS web animation today.

■ IntroduCtIon

xvi

Downloading the Code

The code for the examples shown in this book is available on the Apress web site, www.apress.com. A link can be
found on the book’s information page under the Source Code/Downloads tab. This tab is located underneath the
Related Titles section of the page.

Contacting the Author

Should you have any questions or comments—or even spot a mistake you think I should know about—please feel
free to contact me via e-mail (