Make Awesome SVG Animations with CSS // 7 Useful Techniques

Your video will begin in 10
72 Views

  • Thanks! Share it with your friends!

    You disliked this video. Thanks for the feedback!

fireship
Published
Learn 7 useful SVG animation techniques to make beautiful graphics for your website. In this tutorial, we'll build two different SVGs from scratch and animate them CSS. Source code: https://github.com/fireship-io/animated-svg-demo

00:00 What we're building
00:42 What is an SVG?
02:22 1. Chrome Animation Inspector
03:11 2. Drawing Groups
05:10 3. Duotone CSS Variables
06:30 4. Transition Animations
07:41 5. JS events
08:36 6. Keyframe Animations
10:11 7. Animation Staggering

#css #animation #tutorial

Also see...

SVG in 100 Seconds https://youtu.be/emFMHH2Bfvo
CSS Keyframe Animation https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
SVG Docs https://developer.mozilla.org/en-US/docs/Web/SVG

Install the quiz app
Category
Fireship
Tags
webdev, app development, lesson
Be the first to comment