Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Animations

CSS Animations

Talk given at:

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

Dražen Lučanin

October 17, 2019
Tweet

More Decks by Dražen Lučanin

Other Decks in Programming

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