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
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