accelerating/decelerating transitions, 68–78 ease curves, 74 ease-in curves, 76 ease-out curves, 77 linear curves, 75 actions
adding anticipation to, 159
follow-through and overlapping, 168–181 overlapping and secondary action, 195–196 staging, 165
straight-ahead and pose-to-pose, 168 triggering transitions with, 58
all keyword, 62, 63
alternating animation directions, 19
animation, 93–146. See also animation-* properties; twelve principles of animation
about, 93–94
additional principles of, 208–209 anticipation in, 158–164 appeal in, 207–208 arcs in, 182–195
CSS positioning creating, 96–98 defining with @keyframes rule, 101–104 delaying, 125–127
Disney’s 12 principles of, 148–149, 295–296 ending, 105
events in, 131–140 exaggeration in, 197–206 firing events, 131
follow-through and overlapping action in, 168–181
importance in web design, 3–5, 289 iteration counts for, 114–118 JavaScript vs. CSS, 96 keyframes for, 94 looping, 114–118, 142, 143 practicing, 290 realistic, 147–148, 295 resources on, 294–296 restraint in, 197, 198, 209 running and pausing, 122–125 running forward or in reverse, 119–122 secondary action in, 195–196 slow in and slow out, 182 smoothing, 72, 98–100 solid drawing in, 206–207 squash and stretch in, 149–158 staging for, 164–167
starting, 100, 106
straight-ahead and pose-to-pose actions for, 168 subtle transitions in, 5–6
timing, 196–197 transitions vs., 57, 94, 141–145, 217, 294 trends in, 211, 289 types of, 6–7 uses for, 211 using multiple, 100 animation-* properties, 104–131
adding to off-canvas sidebar navigation, 248–249
animation-delay, 125–127 animation-direction property, 119–122 animation-fill-mode, 95, 128–131 animation-iteration-count property, 114–118 animation-name, 104–106 animation-play-state, 122–125 animation-timing-function, 107–114 animation-duration, 106–107 shorthand animation property, 131
animationend event, 132, 139 animationiteration event, 132, 139 animationstart event, 132, 139 anticipation, 158–164 appeal, 207–208 arcs, 182–195
B
backface-visibility() property, 43–51background color transitions delaying, 79–81 duration of, 66–68
occurring when hovering, 60–61, 63–65 progressive, 60–61
step functions for timing changes in, 69–71
:before and :after pseudo-elements, 58, 62 body property, 212–213
bounce animation
adding arcs to, 182–195 adding exaggeration to, 197–206
applying solid drawing principle to, 206–207 applying squash and stretch principle, 149–158 creating anticipation in, 158–164
follow-through and overlapping action for, 168–181
secondary actions and ball rotation in, 196 slow in and slow out in, 182
staging and context for, 164–167 bounding box, 19–20
box model
adding padding to, 20
CSS positioning to animate, 96–98 generating DOM events after transitions in,
84–87
inheritance of transform-origin property in, 18–19
layouts in CSS animation, 11 rotating, 14–16, 23
starting/reversing transitions of, 82–83
box-sizing:border-box property, 47, 212–213 browsers. See also IE; Opera Mini
animation support in, 95–96, 146 applying transform matrix in, 26–28 CSS transforms and transitions supported by,
7–9
deciding which to support, 287
preventing Webkit browsers from running non- Webkit code, 257
resources on, 292
support and vendor prefixes for, 13, 55 transition and animation performance in,
143–144
transition support by, 58, 92
transitioning CSS animatable properties in, 89 buttons
changing text for sidebar navigation, 256–258 modal window, 226–227
triggering animation play with, 123–125
C
card flip
adding to modal window, 234–235, 236, 239–240
backface-visibility() property for, 43–51
Cascading Style Sheets. See CSS character staging, 164 child elements
controlling 2-D or 3-D rendering of, 39–42 creating new origin for, 18
flattening, 39–42
rendering in 3-D, 41
rotating around parent’s div axis, 42 click events in CSS, 231
color. See also background color transitions adding to background, 19–20 navigation bar background, 216–217 setting modal window, 228–229 containers
adjusting perspective origin of, 37–39 code for modal window, 226–227 content switcher, 269–285
combining transitions on different properties, 285
event listener for, 273–275
implementing switch statements for, 275–276 listening for page to complete loading, 273 setting up HTML document for, 269–270 sliding content block while modifying opacity
and scale, 275–282
styling window components of, 270–273 coordinate space
stacking contexts in, 30–31 3-dimensional, 34 2-dimensional, 12 CSS (cascading style sheets)
adding multiple transforms to elements, 29–30 animatable properties available for transitions,
89–91
browser support for, 9
choosing transitions or animations, 143 click events in, 231
CSS Shapes Module in future, 11
differences in transitions and animations, 142 overriding preserve-3d value in, 40 polyfills for unsupported, 7–9
properties affecting layout and painting in, 144, 145
similarities in transitions and animations, 141 transformations using, 7
2-dimensional coordinate space for, 12 updated lists of animatable properties, 91 usefulness of JavaScript with, 288 using animations in JavaScript or, 96 visual formatting model for, 11–12 CSSSandpaper polyfill, 13
cubic Bézier curves, 69, 72–78 defining, 72–73 ease curves, 74 ease-in curves, 76 ease-in-out curves, 78 ease-out curves, 77 keywords for, 73, 74–78 linear curves, 75
D
decelerating transitions. See accelerating/decelerating transitions
delaying
animations, 125–127 transition starts, 79–81 depth cues, 4–5
detecting browser support, 95
Disney Animation (Johnston and Thomas), 148
Disney, Walt, 148–149
Drawn to Life (Stanchfield and Hahn), 208
drop-down menu for navigation bar, 218–223 duration of transitions, 66–68
E
easing
ease curves, 74
ease-in curves, 76, 107–111 ease in/out animation principle, 182 ease-in-out curves, 78
ease-out curves, 77
effects. See also transforms; transitions resources on, 296–297
elements. See also child elements; pseudo-elements adding multiple transforms to, 29–30 applying multiple transitions to, 62–63, 92 delaying start of transitions, 79–81 moving to different location, 21–22 numeric values when making smaller, 23 scaling, 22–23
setting transition duration for, 66–68 step functions for timing transitions in, 69–71 translating to different location, 21–22, 52 ending animations, 105, 132, 139
environment for staging, 164–165 event listeners
adding for animation events, 137, 138, 139–140 adding JavaScript, 84
setting up for content switcher, 273–275 events
buttons triggering animation, 123–125 listening for animation, 136, 137–138, 139–140 resources on, 293, 294
transitions firing, 84, 92 types of animation, 131–140 exaggeration, 197–206
example code. See also bounce animation; and specific
examples
content switcher, 269–285 how to use, 212–213 modal windows, 224–241 navigation bar, 213–223
off-canvas sidebar navigation, 242–268 squash and stretch, 150–158
F
Flash animation, 7
flat value for transform-style property, 39
follow-through, 168–181 forms, 227–228 functions
cubic Bézier curves, 69, 72–78 distinguishing 2-D and 3-D, 52 matrix(), 25–28 matrix3d(), 53–54 rotate(), 23, 52 scale(), 22–23, 52 skew(), 24 step, 69–71 3-dimensional, 52–54 translate(), 21–22, 52 2-dimensional transform, 21–28 using multiple transform, 29–30
H
Hahn, Don, 208 hiding/showing
front card face, 46
previously defined @keyframes rule, 103
submenu with opacity, 219–221 hovering
adding animation-name to elements in :hover state, 106
changing background color when, 60–61, 63–65 reversing transitions when removed, 91–93 HTML
animation using dynamic, 6–7 code for modal windows, 225–226 drop-down menu code in, 218
setting up content switcher document in, 269–270
structuring off-canvas sidebar navigation, 243–246, 260–261
I
icons for menu items, 247 IE (Internet Explorer)
converting CSS transforms to filters in, 13 transitions using, 58
window.getComputedStyle workaround for, 256
workarounds for inline-block method, 216 workaround for preserve-3d, 42
inheritance for transform-origin property, 18–19
inline-block method, 215–216
J
JavaScript
adding event listeners, 84 animation using, 7
changing animation-name property for
off-canvas sidebar, 254–257
converting transforms to IE filters with, 13 examples used in transform code, 14 finding libraries for animation, 95–96
listening for animation events, 137, 138, 139–140 polyfills for unsupported CSS, 7–9
transitions and ease of control in, 142 usefulness of, 288
using animations in CSS or, 96 Johnston, Ollie, 148
jQuery, 95
K
keyframes. See also @keyframes rule
animation, 94
applying animation-timing-function
between, 107
creating anticipation with, 158–164 defined, 101
defining with @keyframes rule, 101–104
overriding timing functions in, 111, 113, 114 placement of transitions and animations in, 142 resetting property values in, 100
setting up timing with, 197 keywords all, 62 animation-fill-mode, 128 Bézier curve, 73, 74–78 perspective-origin, 37 transform-origin, 17
L
layers of design needs, 2–3, 288 laying out pages, 143–145
length values in perspective property, 34 libraries for JavaScript animation, 95–96 linear curves, 75
links for navigation bar, 214–217 list items
adding for drop-down menu, 218 displaying horizontally, 215 selecting, 215–216
looping
animations, 114–118, 142, 143 unavailable with transitions, 142
M
matrix math, 25–26, 29
matrix() function, 25–28 matrix3d() function, 53–54
measurements in translate() function, 22
mobile device navigation, 243 modal windows, 224–241
adding card flip to, 234–235, 236 code for opening/closing overlay, 229–231 container and button code for, 226–227 debate over, 224
form labels for, 227–228 HTML code for, 225–226 illustrated, 224–225 moving offscreen, 232–234 scaling to final size, 236–237 setting color and opacity for, 228–229 shrinking, 237–239
using multiple transitional effects in, 239–240 motion. See animation
moving elements to different location, 21–22
ms vendor prefix, 5, 13
multiple animations, 100
N
naming transform property, 16
navigation. See navigation bar; off-canvas sidebar navigation
navigation bar, 213–223
drop-down menu for, 218–223 illustrated, 213
links for, 214–216
selecting list items from, 215–216 setting background color for, 216–217 setting up horizontal elements for, 215 nested transforms, 28
numbers
about matrices, 25–26
values for making elements smaller, 23
O
objects
applying principle of solid drawing to, 206–207 arcs and motion of, 182–183
rotating around axis, 23
objects (continued) skewing, 24
slow in and slow out of, 182 squashing and stretching, 149–158 staging characters and, 164
visibility of back side of transformed, 43–51 off-canvas sidebar navigation, 242–268
adding animation-* properties to, 248–249
@keyframes rules for opening/closing, 249–254 HTML code for layout, 243–244
icons for menu items, 247
JavaScript changing animation-name property, 254–257
layout for four divs, 244–247 open and closed, 242
preventing Webkit browsers from running non- Webkit code, 257
second version of, 259–268 suggested enhancements for, 259 opacity
changing as content block slides outside window, 280
combining with scaling effect, 277–279 hiding/showing elements used by browsers, 229 hiding/showing submenu with, 219–221 setting modal window, 228–229, 231–232 transition for changing, 231–232
opening/closing modal window overlay, 229–231 Opera Mini oTransitionEnd event, 84 transforms with, 13 transitions using, 58 overlapping action, 181, 195–196 overriding @keyframes rule, 103 preserve-3d value, 40
timing functions in keyframes, 111, 113, 114
P
padding for bounding box, 20 painting elements, 143–145 parent elements
flattening child element on, 39–42 rendering child element in 3-D, 41 rotating child around parent’s div axis, 42
performance
resources on, 294–295
of transitions and animations, 143–144, 217
perspective function, 53
perspective-origin property, 37–39
perspective property about, 55
setting up 3-dimensional look with, 34–37 polyfills
applying transitions in IE with, 58 resources on, 292
Transformie and CSSSandpaper, 13 pose-to-pose action, 168
positioning
animating box model with CSS, 96–98 relative, 285
using absolute, 284
practicing animation principles, 290
preserve value for transform-style property, 39, 40, 42
progressive enhancement designing with, 243, 288–289 suggestions for sidebar navigation, 259 properties
affecting layout and painting, 144, 145 applying values to completed animations, 128 CSS animatable, 89–91
effect of transitions and animations on, 142 resources on animatable, 294
setting different values for multiple animation, 100 setting values on transition-*, 92
3-dimensional transform, 34–52, 55 2-dimensional transform, 16–20, 55 using asterisk in, 47
pseudo-elements
:before and :after, 58, 62 support for, 95
R
realistic animation, 147–148, 295 relative positioning, 285
rendering child element in 3-D, 41 resizing. See scaling
resources
animation, 294–295 browser support, 292 detecting browser support, 95 effects, 296–297 performance, 294–295 polyfills, 292 realistic animation, 295–296 transform matrix, 293 transforms, 292 transitions, 293–294 transitions vs. animations, 294–295 twelve principles of animation, 295–296 updated lists of animatable properties, 91
user interface design, 296 visual formatting model, 293 restraint in animation, 197, 198, 209 reversing
animations, 119–122 transitions, 82–83
transitions when hovering stopped, 91–93
rotate() function, 23, 52 rotations
around origin point, 18–19 bounding box, 19–20 2-D box, 14–16, 23
using 3-dimensional perspective, 36 running and pausing animations, 122–125
S
scale() function, 22–23, 52
scaling
modal window to final size, 236–237, 239–240 shrinking modal windows, 237–240 transform for squash and stretch animation,
153–158
using scale() function, 22–23
secondary action, 195–196 shrinking modal windows, 237–240 skeuomorphic realism, 211, 289 skewing objects, 24
sliding
content block while changing opacity, 280 modal window as it becomes opaque, 232–234,
239–240
modifying content block opacity and scale while, 275–282
off-canvas sidebar on/off canvas, 259–268 smoothing animation for, 98–100 submenu offscreen, 221–222 using CSS positioning in, 96–98 smoothing animation, 98–100 solid drawing, 206–207 squash and stretch, 149–158 stacking contexts, 30–31 staging, 164–167 Stanchfield, Walt, 208 starting animations, 100, 106 states, animation, 142 step functions, 69–71 straight-ahead action, 168 syntax
adding values in step functions, 69 transitioning multiple properties, 62, 81 using asterisk in properties, 47 writing multiple transforms, 29–30
T
:target hack, 231
Thomas, Frank, 148 3-D CSS transforms, 33–52
about, 33–34
backface-visibility() property for, 43–51
browser support for, 7, 8 coordinate space for, 34
distinguishing functions in 2-D and, 52 functions for, 52–54
IE support for, 13
perspective-origin property for, 37–39 perspective property for, 34–37
properties for, 34–52, 55 rotations in 2-D vs., 36–37
transform rendering model for, 30–33 timing
animations, 107–114 applying ease-in-out, 187
overlapping actions with different, 181, 195–196 playing in reverse, 119–122
principle of animation, 196–197 resources on, 293
secondary actions, 195–196
step functions in background color changes, 69–71
transitions, 68–78 transform matrices
math for, 25–26
matrix() function for, 25–28 matrix3d() functions for, 53–54
order in, 29 resources on, 293
transform-origin property
inheritance and, 18–19
perspective-origin property vs., 37, 38
setting values for, 16–20
transform property
about, 14, 55 naming, 16
using perspective function with, 53 transform-style property, 39–42
Transformie polyfill, 13
transforms, 11–55. See also 3-D CSS transforms; transform matrices; 2-D CSS transforms
about CSS visual formatting model, 11–12 adding multiple transforms to elements, 29–30 browser support and vendor prefixes for, 13, 55 converting to IE filters with JavaScript, 13 creating 2-D rotation, 14–16
functions for 2-D, 21–28 nested, 28
transforms (continued)
setting fixed point for object, 16–20 transform rendering model for 2- and 3-D,
30–33
used during arcing of bouncing ball, 194 working with, 55–56
transition-* properties
checking mismatched vendor prefixes in, 68 setting values on, 92
transition-delay property, 79–81
transition-duration property, 66–68
transition-property, 62–65
transition-timing-function, 68–78 using shorthand transition property, 81
transitionend event values, 84
transitions, 57–92. See also background color transitions; transition-* properties
about, 5–6, 57–58, 92
accelerating and decelerating, 68–78
adding multiple transitions to elements, 62–63, 81, 92
adding to background color, 217 animatable property resources, 294 animations vs., 57, 94, 141–145, 217, 294 browser support for, 58, 92
CSS animatable properties for, 89–91 DOM events generated by, 84–88 example code for, 59–62, 63–65 resources on, 293–294 shorthand method for, 81 starting and reversing, 82–83 transition event resources, 293 types of animation for, 6–7
using with drop-down menu, 218–223
translate() function, 21–22, 52 trends in animation, 211, 289
triggering animation play with buttons, 123–125 twelve principles of animation
about, 209–210 additional principles, 208–209 anticipation, 158–164 appeal, 207–208 arcs, 182–195 exaggeration, 197–206
follow-through and overlapping action, 168–181 overview, 148–149
practicing animation principles, 290 resources on, 295–296
secondary action, 195–196 slow in and slow out, 182 solid drawing, 206–207 squash and stretch, 149–158
staging, 164–167
straight-ahead and pose-to-pose actions, 168 timing, 196–197
2-D CSS transforms, 14–33 browser support for, 7, 8 coordinate space for, 12
distinguishing functions in 3-D and, 52 functions for, 21–28
IE support for, 13 properties for, 16–20, 55 rotating box, 14–16 3-D rotations vs., 36–37
transform rendering model for, 30–33
U
underscore hack, 216 user interface design
animation as guide in, 289 animation in, 208, 209, 289 resources on, 296
user expectations of forward and reverse transitions, 83
V
values
adding for step functions, 69 applying to completed animations, 128 overriding preserve-3d, 40
resetting inside keyframes, 100 setting for transition-* properties, 92
using different values for multiple animation properties, 100
visibility, 3-D backface, 43–51
visual formatting model, resources on, 293
W
webkit vendor prefix
browser support and, 13, 15
checking mismatches in transition-*
properties, 68 transitions and, 58 webkitTransitionEnd event, 84 website design about transitions, 5–6 animation in, 3–5, 208, 209, 289 choosing browsers to support, 287 hierarchy of needs in, 2–3, 288
progressive enhancement in, 243, 259, 288–289 trends in, 211, 289