Pro CSS3 Animation

■ Contents

viii

Delaying and Combining Transition Effects .......................................................................... 21

Introducing Easing Functions ...................................................................................................................... 22

Transition Timing Functions and Bezier Curves ........................................................................................... 23

Summary .............................................................................................................................. 29

■ Chapter 3: CSS3 Transitions for Images �������������������������������������������������������������������� 31

Simple Image CrossFade Effect ........................................................................................... 31

Option 1: First Image As a CSS Background ................................................................................................ 32

Option 2: Both Images As HTML Elements ................................................................................................... 32

Option 3: Both Images As Backgrounds ....................................................................................................... 33

A Simple Image Gallery Enhanced with CSS3 ...................................................................... 34

The HTML Markup ....................................................................................................................................... 34

The Initial CSS ............................................................................................................................................. 35

Improving the Gallery .................................................................................................................................. 35

Adding Captions ........................................................................................................................................... 36

Changing the Initiating Event ....................................................................................................................... 36

Simple Popup Image Captions ............................................................................................. 37

Image Card Stack and Fan Reveal ....................................................................................... 40

Clapperboard Image Captions with Different Entry and Exit Effects .................................... 46

Creating Separate Transition Sequences ..................................................................................................... 50

Changing the Exit Event ............................................................................................................................... 51

Background Image Transitions and Animation on Page Load .............................................. 52

Animating the Background Images on Load ................................................................................................ 54

Creating and Animating Fake Background Images ...................................................................................... 55

Summary .............................................................................................................................. 56

■ Chapter 4: CSS3 Transitions for UI Elements ������������������������������������������������������������� 57

Modern Site Navigation Markup ........................................................................................... 57

Horizontal Navigation Bar Basics ......................................................................................... 58

A Simple Navigation Bar Enhanced with CSS3 .................................................................... 59

Highlighting the Current Page in Navigation ........................................................................ 60

Horizontal Tab Navigation with CSS3 Transitions ................................................................. 62