Pro CSS3 Animation

■ Index

JavaScript, 118
and Flash, 7
JQuery, 127
random scattered elements, 131
triggering, 127
limitations, 5
manipulating SVG, 106
imagemap, 108
snowflake, 110
Optimizing of, 124
page reflow, 155
placing SVG, 104–106
adding object/iframe, 106
drawbacks, 105
elements, 105
Inline image, 104
Inline SVG, 105
reflow, rules for, 156
repaint, 155
ripple, 155
SVG
data, 103
file, 125, 164
tools, 112
transforms (see Transformation, CSS)
transitions (see Transitions, CSS)
viewport Size , 123
W3C, 155
CSS3 keyframe animations, 75
altering image
adding captions , 91
creating fallback, 93
CrossFade, 90
Fade-In-Out, 88
Fade-In-Out, motion, 89
On-Click method, 92
animation-direction property values, 78
animation-fill-mode property values, 78
blending and chaining
animation-delay, 80
animation-duration, 80
merging transitions, 79
CSS3 slideshow
background image, 87
HTML code, 85
lightbox gallery, 97
adding captions, 99
mouseover caption, 99
logo on page load, 101
marquee for text, 93
News tickers/notification, 93
older browsers support, 77
pausing, 83
pausing slideshow, 88

playback control, 78

repeat sequences, 80

syntax, 76

tweening process, 75

CSS3 transitions, 57

button click effects, 70–72

checkbox markup, 71

markup, for checkbox-associated div, 72

Mars image, 71

opening and closing div, 72

popup text, 72

current page highlight, 60

custom validation errors, for HTML5

forms, 63–65

accessible form, 64

form error messages animated, 64

immediacy, 63

redundancy, 63

security, 63

styling and displaying validation errors, 65

form elements animation, 73

horizontal drop-down navigation, 69

horizontal navigation interfaces, 58

horizontal tab navigation, 62

animated tab navigation system, 62

CSS to Style Navigational Links, 62

HTML5 site navigation structure, 57

image crossfade effect

CSS background, 32

HTML elements, 32

image as backgrounds, 33

modern site navigation markup, 57

navigation bar enhanced, 59

transitioned opacity, 31

UI button depress transition, 66

UI button reveal transition, 67

CSS Working Group (CSSWG), 1

n D

3D Gallery, 145

circular, 146

level-4 selectors, 149

popup caption, 148

shading effect, 147

Document Object Model (DOM), 11

n E

Easing timing function, 24

Entry and exit effects, 46

n F, G

Fragment shaders, 162

CSS3 animations and transitions (cont.)