Animations and Transitions

Animations and Transitions

CSS Day, 14th June 2013

9d9f17e37b751b9f83081ba3dd44bab4?s=128

Peter Gasston

June 14, 2013
Tweet

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.

  79. None
  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.