Talk given at:
(S)CSS Zagreb Meetup – Zagreb 17.10.2019. https://www.meetup.com/S_CSS_Zagreb/events/265312074/
CSS AnimationsDražen Lučanin (@metakermit)(S)CSS Zagreb Meetup, 17.10.2019.What’s up, doc?#inktober edition
View Slide
What is animation?• “Animation is a method in which pictures are manipulatedto 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 walkMore about walk cycles: https://www.the-flying-animator.com/walk-cycle.htmlcontactpasspositionbreakthe fallkeyframes 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 animationhttps://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