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

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

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

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 

The simplest animation • Google Web Designer – https://webdesigner.withgoogle.com • Dreamweaver for creating ads • useful as a free animation tool • (with HTML/CSS export ) 

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

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 

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

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

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

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

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

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/ 

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

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

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 

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 

• Amazing projects on CodePen, like the pure CSS "Moustached Nanny”
 https://codepen.io/miocene/pen/mjLPVp 

No content