How to animate an SVG with CSS (Works in Github Readme)
In this video i show one way to create a looping animation of an SVG/ image using CSS.
What led me to this was that i found a Github repo README.md that has a moving image and i needed to investigate further and create my own. This video explains how i achieved it.
Link to the code: https://github.com/danba340/svg-anima...
My Tutorial steps:
1. Add id to svg tag
2. Add classname to the tags inside the svg that should be animated.
3. Add style tag for CSS inside svg
4. add @keyframes nameofanimation and model the animation changes
5. Make a css selector #id .class and add animation: nameofanimation 0.5s infinite;
Say hi on twitter: / barelydaniel
0:00 Intro
0:15 Why are we doing this?
0:35 How it can be achieved
1:12 The Implementation
3:03 Demo on Github.com
3:25 Like, Sub, BYE!
Dont forget to attribute Freepik if you use this SVG
Icons made by Freepik from www.flaticon.com