CSS Animations

Talk given at:

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

Transcript

1. CSS Animations
   Dražen Lučanin (@metakermit)
   
   (S)CSS Zagreb Meetup, 17.10.2019.
   What’s up, doc?
   
   #inktober edition
   

   View Slide

2. What is animation?
   • “Animation is a method in which pictures are manipulated
   to appear as moving images.” – Wikipedia
   

   View Slide

3. Anatomy of a rabbit walk
   • The 24-frame walk cycle
   
   • https://ezgif.com/maker/ezgif-4-bfe77455-gif
   

   View Slide

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
   

   View Slide

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 )
   

   View Slide

6. The simplest CSS animation
   https://codepen.io/metakermit/pen/QWWKNRY?editors=1100
   

   View Slide

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
   

   View Slide

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%; } }
   

   View Slide

9. Easing
   • Adapting the timing and spacing of frames to match real-
   world physics
   

   View Slide

10. Ease-in
    • No speed initially, gradually accelerate to a high speed
    
    • E.g. gravity pulling an object
    

    View Slide

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

    View Slide

12. Ease-in-out
    • High speed initially, gradually decelerate to no speed
    
    • E.g. someone moves their arm
    
    • stationary
    
    • in motion
    
    • stationary again
    

    View Slide

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/
    

    View Slide

14. Parallax
    • A popular effect
    
    • But it’s obtained using JavaScript
    
    • Article – https://cssanimation.rocks/parallax/
    
    • https://codepen.io/donovanh/pen/ZKJOBe
    #
    JaaaavaaaaScriiiiiipt
    

    View Slide

15. Can I use?
    • https://caniuse.com/#feat=css-animation
    

    View Slide

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
    

    View Slide

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
    

    View Slide

18. • Amazing projects on CodePen, like the pure CSS
    "Moustached Nanny”

    https://codepen.io/miocene/pen/mjLPVp
    

    View Slide

19. View Slide