Animations and Transitions

CSS Day, 14th June 2013

Transcript

1. Animations & Transitions 1
2. 2 Peter Gasston @stopsatgreen
3. 3 1. The past 2. The present 2.1. Transitions 2.2. Animations 2.3. Performance 2.4. Soft skills 3. The future
4. Animated Timeline 4 <img> <marquee> <embed> <script> Mosaic 1.0 IE2 NN1.1 IE3 1993 1995 1996
5. DHTML! $(foo).animate({ height: '50%', opacity: 0.25, }); function doMove() { foo.style.left = (foo.style.left+10)+'px'; setTimeout(doMove,20); }
6. Animated Timeline <img> <marquee> <embed> <script> <style> Mosaic 1.0 IE2 NN1.1 IE3 Safari 3 1993 1995 1996 2007
7. Animations & Transitions
8. Hooray! Except that implementation is incomplete, not in accordance with the spec, and has many bugs. But otherwise, yes: Hooray!
9. -webkit- prefixed in Safari 6 Unprefixed in Safari 7 and all other modern browsers Transitions
10. Transitions E { transition: 1s; }
11. Transitions transition- property duration delay timing-function
12. Transitions all property none transition-property:
13. Transitions 0 ns || nms transition-duration:
14. Transitions 0 ns || nms -ns || -nms transition-delay:
15. Transitions .foo { transition-duration: -1s;} by ~nerdsman567 on Deviant Art
16. Transitions cubic-bezier() steps() keyword transition-timing-function:
17. Transitions cubic-bezier(.1,.35,.9,.7) p0 = 0,0 p3 = 1,1 p2 = .9,.7 p1 = .1,.35
18. Transitions cubic-bezier(.1,.35,.9,.7)
19. Transitions ease-in ease-in-out ease-out
20. Transitions steps() steps(4,start) steps(4,end)
21. Steps
22. Steps step-start step-end
23. Steps
24. Multiple Transitions .foo { transition: height 1s ease-in, color 1.5s linear; }
25. Multiple Transitions .foo { transition-property: height, color; transition-duration: 1s, 1.5s; transition-timing-function: ease-in; }
26. Multiple Transitions .foo { transition-property: A, B, C, D; transition-duration: x, y, z; } Ax, By, Cz, Dx
27. Pop Quiz .foo { transition: height 1s ease-in, none 1.5s linear; } ✗
28. Multiple Transitions .foo { transition: gorilla 1s, color 5s; }
29. Multiple Transitions “…unrecognized or non-animatable properties must be kept in the list to preserve the matching of indices.”
30. Multiple Transitions Firefox Chrome
31. Multiple Transitions .foo { transition-property: gorilla, color; transition-duration: 1s, 5s; } /* Firefox */ .foo { transition: color 5s; } /* WebKit / Blink */ .foo { transition: all 5s; }
32. -webkit- prefixed in Chrome and Safari Animations
33. Animations @keyframes chimp { 100% { background-color: yellow; } }
34. Animations @keyframes ☠ { 100% { background-color: yellow; } }
35. Animations @keyframes chimp { 0% { background-color: yellow; } 40% { background-color: green; } 100% { background-color: cyan; } } 0% == from 100% == to
36. Animations @keyframes chimp { from, to { width: 100px; } 40% { background-color: green; width: 200px; } to { background-color: cyan; } }
37. The Spec Says… “If a property is not specified for a keyframe, or is specified but invalid, the animation of that property proceeds as if that keyframe did not exist.”
38. Animations @keyframes chimp { from { border-width: 10px; width: 100px; } 40% { width: 20px; } to { border-width: 1px; width: 1px; } }
39. Animations .foo { animation: chimp 1s; }
40. Animations animation- name duration delay timing-function iteration-count direction fill-mode play-state
41. Animations @keyframes chimp { from { width: 100px; animation-timing-function: ease-in; } 40% { width: 20px; animation-timing-function: ease-out; } to { width: 1px; } }
42. Animations normal alternate reverse alternate-reverse animation-direction:
43. One Direction
44. Animations If animation-direction has a value of reverse or alternate-reverse, the value of animation-timing-function is also reversed. e.g. ease-in becomes ease-out.
45. Animations none backwards forwards both animation-fill-mode:
46. Fill Mode backwards will apply the properties in the from keyframe before the animation begins. forwards will apply the properties in the to keyframe when the animation ends. both will apply the properties in the from keyframe before the animation begins, and the properties in the to keyframe when the animation ends.
47. Fill Mode div { animation: foo 1s 1s; } animation-fill-mode: backwards; animation-fill-mode: forwards; animation-fill-mode: both;
48. Spec Violation “When the animation-duration is 0s, animation-fill-mode still applies.” But no browser I’ve tested complies with this.
49. Animations running paused animation-play-state:
50. Multiple Animations @keyframes one { to { background-color: red; } } @keyframes two { to { background-color: blue; width: 200px; } } div { animation: two 1s, one 1s; }
51. Multiple Animations div { animation: foo 1s infinite, bar 2s 1s alternate-reverse, baz 500ms alternate infinite; } Good luck with that!
52. Rubbish No @keyframes view in dev tools. :( LOL
53. Transitionable The properties that can be transitioned are generally those which accept quantifiable values: length, color, number, or percentage http://thewebevolved.com/support/animation/properties/
54. Transitionable The auto value isn’t quantifiable, so can’t be animated to or from. Values inside the calc() function are, so can be.
55. Transitionable The visibility property is a special case: it toggles between hidden and visible at the end* of the animation, with no transition. *or the beginning, depending on your parameters
56. Visibility
57. Transitionable Some properties will be implicitly transitioned - e.g. a transition on the font-size property makes other properties that have values relative to it - line-height, margin, etc - transition also. The exception is IE10, where only line-height will be transitioned.
58. Transitionable You can transition properties applied to the ::after and ::before pseudo-elements*. *except in Safari
59. Transitionable http://thewebevolved.com/support/animation/properties/ div { background: url('foo.png') no-repeat 25% 25%, url('bar.png') no-repeat 50% 50%, url('baz.png') no-repeat 75% 75%; transition: 2s; } div:hover { background-position: 100% 25%, 0 50%, 50% 75%; }
60. Kittens
61. Spec Violation “Gradient[s]… must have the same type (radial or linear) and same number of stops in order to be animated.” No browser I’ve tested complies with this.
62. Transitionable text { transition: 2s; } svg:hover rect { fill: green; }
63. Events transitionend* *webkitTransitionEnd in Safari el.addEventListener( 'transitionend', fooBar );
64. Events el.addEventListener( 'transitionend', function(e) { var time = e.timeElapsed, prop = e.propertyName; });
65. TIL When shorthand properties are transitioned, the transitionend event fires for all of the individual properties. Except in Chrome and Safari, if you explicitly state the shorthand property as the value for transition-property.
66. TIL Firefox doesn’t fire the transitionend event when pseudo elements are transitioned, and the event object doesn’t contain the pseudoElement attribute.
67. TIL When you use the all value for transition-property, the implicit transitions that fire the transitionend event vary between browsers.
68. TIL Firefox in particular fires on some quite unexpected properties. div { transition: color 1s; }
69. TIL Be wary of transitionend.
70. Events el.addEventListener('animationstart', foo); el.addEventListener('animationiteration', foo); el.addEventListener('animationend', foo);
71. Events el.addEventListener( 'transitionend', function(e) { var time = e.timeElapsed, anim = e.animationName; });
72. TIL In Firefox, the animationstart event doesn’t fire if the animation begins before the DOMContentLoaded event.
73. Duh. The animationend event doesn’t fire when the animation-iteration property has a value of infinite.
74. Spec Violation “When the animation-duration is 0s, animation-fill-mode still applies… also, animation events are still fired.” No browser I’ve tested does this.
75. Performance “Use CSS keyframe animation or CSS transitions, if at all possible. The browser can optimize painting and compositing bigtime here.” http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
76. Performance Chrome uses graphics acceleration automatically for transitioned elements, but in Safari, especially for iOS, you may have to force it: div { -webkit-transform: rotateY(0deg); } However… http://blog.tumult.com/2013/02/28/transform-translate-vs-top-left/
77. Performance … semi-opaque or transparent elements may see little tangible benefit from the rotateY hack - and it could even reduce performance. http://blog.tumult.com/2013/02/28/transform-translate-vs-top-left/
78. Obligatory It depends.
80. CSS3 v jQuery http://thewebevolved.com/support/animation/properties/
81. Soft Skills Animation is behaviour.
82. Time “Animation can help to provide context. It helps brains understand how the information flows.” https://medium.com/design-ux/926eb80d64e3
83. Time
84. Speed Speed it all up. People aren’t on your site to admire your animation skills they’re there to achieve an aim.
85. Technique http://en.wikipedia.org/wiki/12_basic_principles_of_animation
86. 12 Basic Principles 1. Squash and stretch 2. Exaggeration 3. Staging 4. Anticipation 5. Motivation 6. Secondary action 7. Overlap 8. Follow-through 9. Balance 10. Timing 11. Rhythm 12. Camera movement http://www.digitalartsonline.co.uk/features/illustration/12-rules-of-animation/
87. Exaggeration div { transition: 1s cubic-bezier(.3,0,1,1.25) ; }
88. Exaggeration
89. Anime
90. Pokemon
91. P.i.t.a. http://taybenlor.com/2013/04/19/animating-with-physics.html
92. The Future var anim = el.animate({}, t); var anim = el.animate({color:'red'}, 2); https://dvcs.w3.org/hg/FXTF/raw-file/default/web-anim/index.html
93. The Future var anim = new Animation(el, {color:'red'}, 2); document.timeline.play(anim); var anim = new Animation( el, {color:'red'}, { iterationDuration: 3, playbackRate: 2 } );
94. The Future var animA = new Animation(eA, {opacity:0}, 2), animB = new Animation(eB, animA.effect, 4);
95. Future Events el.addEventListener('timingstart', foo); el.addEventListener('timingiteration', foo); el.addEventListener('timingend', foo); el.addEventListener('timingcancel', foo);
96. The Future Advanced easing, path-based animation, parallelization, synchronization, interrupting and adapting.
97. Learn More http://tympanus.net/codrops/category/playground/
98. Learn More http://codepen.io
99. Bibliography http://coding.smashingmagazine.com/ 2013/04/26/css3-transitions-thank-god- specification/ http://coding.smashingmagazine.com/ 2011/09/14/the-guide-to-css-animation- principles-and-examples/ http://coding.smashingmagazine.com/ 2013/03/04/animating-web-gonna-need-bigger- api/ 99
100. Fin.