CSS Animations

CSS Animations

Talk given at:

(S)CSS Zagreb Meetup – Zagreb 17.10.2019.
https://www.meetup.com/S_CSS_Zagreb/events/265312074/

7874898d532b989d3a1108cade372cd2?s=128

Dražen Lučanin

October 17, 2019
Tweet

Transcript

  1. CSS Animations Dražen Lučanin (@metakermit) (S)CSS Zagreb Meetup, 17.10.2019. What’s

    up, doc? #inktober edition
  2. What is animation? • “Animation is a method in which

    pictures are manipulated to appear as moving images.” – Wikipedia
  3. Anatomy of a rabbit walk • The 24-frame walk cycle

    • https://ezgif.com/maker/ezgif-4-bfe77455-gif
  4. Anatomy of a rabbit walk More about walk cycles: https://www.the-flying-animator.com/walk-cycle.html

    contact pass position break the fall keyframes tweens
  5. The simplest animation • Google Web Designer – https://webdesigner.withgoogle.com •

    Dreamweaver for creating ads • useful as a free animation tool • (with HTML/CSS export )
  6. The simplest CSS animation https://codepen.io/metakermit/pen/QWWKNRY?editors=1100

  7. CSS Properties • animation-name: none • animation-duration: 0s • animation-timing-function:

    ease • animation-delay: 0s • animation-iteration-count: 1 • animation-direction: normal • animation-fill-mode: none • animation-play-state: running
  8. Keyframes • Can have multiple animated properties
 
 @keyframes falling-down

    {
 0% { top: 0px; left: 40px; }
 100% { top: 160px; left: 150px; }
 } • Multiple positions
 
 @keyframes falling-down {
 0% { top: 0px; }
 50% { top: 10px; }
 100% { top: 160px; }
 } • Instead of 0% / 100% you can use from / to
 
 @keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; } }
  9. Easing • Adapting the timing and spacing of frames to

    match real- world physics
  10. Ease-in • No speed initially, gradually accelerate to a high

    speed • E.g. gravity pulling an object
  11. Ease-out • High speed initially, gradually decelerate to no speed

    • E.g. a cyclist in motion breaks to amortise themselves to a stop
  12. Ease-in-out • High speed initially, gradually decelerate to no speed

    • E.g. someone moves their arm • stationary • in motion • stationary again
  13. SVGs? • They work exactly the same! • You can

    give classes to shapes and style them from CSS • (also possible to fully define animations inside SVGs) • Tutorial – https://css-tricks.com/animating-svg-css/
  14. Parallax • A popular effect • But it’s obtained using

    JavaScript • Article – https://cssanimation.rocks/parallax/ • https://codepen.io/donovanh/pen/ZKJOBe # JaaaavaaaaScriiiiiipt
  15. Can I use? • https://caniuse.com/#feat=css-animation

  16. Animation resources • The Animator’s Survival Kit • Richard Williams


    (the animator of Who Framed Roger Rabbit) • An in-depth intro to animation • http://www.theanimatorssurvivalkit.com
  17. CSS Animations resources • Syntax tutorial
 https://css-tricks.com/snippets/css/keyframe-animation-syntax/ • MDN
 https://developer.mozilla.org/en-US/docs/Web/CSS/animation

    • Projects, talks, articles and book by Rachel Nabors
 http://rachelnabors.com/ • Whole games using CSS animations! • http://rachelnabors.com/blackbrickroad/ • Some amazing projects on CodePen • https://codepen.io/miocene/pen/mjLPVp
  18. • Amazing projects on CodePen, like the pure CSS "Moustached

    Nanny”
 https://codepen.io/miocene/pen/mjLPVp
  19. None