Hey guys, I really needed to put this awesome video post by Dev Ed as he demonstrates step by step method to create an SVG animation with CSS.
Here are the steps I noted:
- Step 1 – get your SVG image ready by editing it on Figma or any other SVG editor by grouping items and naming them that need to be animated.
- Step 2 – exporting edited SVG by clicking and checking in include “id” attribute.
- Step 3 – copying SVG code by opening it in a text editor or IDE and pasting it onto your HTML file.
- Step 4 – now creating a CSS file and adding animations to elements by their ids using @keyframes.