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

CSS Animations Are The Awesomest!

Val Head
July 12, 2013

CSS Animations Are The Awesomest!

The things that contribute most to how great CSS animations can be are the slightly less obvious ones. Properties that handle direction, fill-mode, delay, and timing functions can make or break the usefulness of CSS animations in practice. In this short session we’ll look at how useful these additional properties can be, and maybe even have you loving CSS animations before the evening is over.

Val Head

July 12, 2013
Tweet

More Decks by Val Head

Other Decks in Design

Transcript

  1. CSS ANIMATIONS
    ARE THE AWESOMEST!!
    @RefreshPitt @vlh
    Friday, July 12, 13

    View full-size slide

  2. FORGET
    EVERYTHING YOU KNOW ABOUT CSS
    Friday, July 12, 13

    View full-size slide

  3. WELL, OK. NOT EVERYTHING.
    Friday, July 12, 13

    View full-size slide

  4. Friday, July 12, 13

    View full-size slide

  5. VENDOR PREFIXES
    ARRRRRGGGHHH!!!!!!!
    Friday, July 12, 13

    View full-size slide

  6. Friday, July 12, 13

    View full-size slide

  7. Friday, July 12, 13

    View full-size slide

  8. Friday, July 12, 13

    View full-size slide

  9. EASING!
    Friday, July 12, 13

    View full-size slide

  10. ease
    linear
    ease-in
    ease-out
    ease-in-out
    steps
    Friday, July 12, 13

    View full-size slide

  11. ease
    linear
    ease-in
    ease-out
    ease-in-out
    cubic-bezier
    Friday, July 12, 13

    View full-size slide

  12. Friday, July 12, 13

    View full-size slide

  13. Friday, July 12, 13

    View full-size slide

  14. Friday, July 12, 13

    View full-size slide

  15. TIME
    PROGRESSION
    Friday, July 12, 13

    View full-size slide

  16. TIME
    PROGRESSION
    Friday, July 12, 13

    View full-size slide

  17. Friday, July 12, 13

    View full-size slide

  18. Friday, July 12, 13

    View full-size slide

  19. 0%
    1 100%
    0%
    2 100%
    0%
    3 100%
    Friday, July 12, 13

    View full-size slide

  20. 0%
    1 100%
    0%
    2 100%
    0%
    3 100%
    Friday, July 12, 13

    View full-size slide

  21. 0%
    1 100%
    0%
    2 100%
    0%
    3 100%
    Friday, July 12, 13

    View full-size slide

  22. 0%
    1 100%
    0%
    2 100%
    0%
    3 100%
    Friday, July 12, 13

    View full-size slide

  23. RESOURCES
    Friday, July 12, 13

    View full-size slide

  24. Friday, July 12, 13

    View full-size slide

  25. Friday, July 12, 13

    View full-size slide

  26. Friday, July 12, 13

    View full-size slide

  27. Friday, July 12, 13

    View full-size slide

  28. Friday, July 12, 13

    View full-size slide

  29. Friday, July 12, 13

    View full-size slide

  30. @vlh
    [email protected]
    codepen.io/valhead
    Friday, July 12, 13

    View full-size slide