Рет қаралды 947,895
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: github.com/fireship-io/animat...
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 • SVG Explained in 100 S...
CSS Keyframe Animation developer.mozilla.org/en-US/d...
SVG Docs developer.mozilla.org/en-US/d...
Install the quiz app 🤓
iOS itunes.apple.com/us/app/fires...
Android play.google.com/store/apps/de...
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
My VS Code Theme
- Atom One Dark
- vscode-icons
- Fira Code Font