{"id":24348,"date":"2015-07-22T23:01:13","date_gmt":"2015-07-22T15:01:13","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=24348"},"modified":"2020-06-26T16:37:12","modified_gmt":"2020-06-26T08:37:12","slug":"svg-animations","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/svg-animations\/","title":{"rendered":"30 Awesome SVG Animation For Your Inspiration"},"content":{"rendered":"

Designers used to create animations in HTML elements using CSS. However, due to the limitations of HTML elements in creating patterns, shapes, and others, they naturally turn to SVG<\/a>, which offers more interesting capabilities<\/a>.<\/p>\n

Working with SVG, we enjoy good browser support for SVG animation<\/a>, and we have more ways to create new animation<\/a>. You can use both the built-in SVG animation functionality or CSS3 animation (note that not everything can be done by CSS so there is still need for JavaScript). Another way is by using JavaScript engines<\/a> such as GSAP or Snap. JS is good practice for creating animation.<\/p>\n

Here I have compiled some amazing animated SVG. Some use SVG animation, others use CSS transform for basic animation, and the rest use the help of JavaScript.<\/p>\n

Border Animation<\/a> by Sean McCaffery<\/a><\/h2>\n

Made only with CSS, a border forms smoothly around the text, when you hover over the \u201cHOVER\u201d instruction.<\/p>\n