In-between the two keyframes where the arrow moves up (40% and 60%) it moves back to Y(0) at the 50% keyframe. Inside your CSS stylesheet, add the following rule-sets (classes, properties, and values): Ok next up let’s add a bit of styling, and then we’ll get on to the fun part, with CSS animations!

Added a class: arrow-circle-down which we’ll need in the CSS section.I removed the width and height properties (the original file is way too big).If you compare the original SVG source to the one you see in the HTML markup above, you can see that I made a few changes: There are many other ways to add SVGs for different purposes - but I’ll save that for a different tutorial. You can save a lot of resources by downloading the 5-10 icons that you actually need in SVG format.įor this example, we’re embedding the SVG file directly in the HTML markup. A lot of websites load the entire Font Awesome library on their website, but they only use a small handful of icons - that’s a waste of bandwidth.

Animated svg icons free download