{"id":23954,"date":"2015-05-18T18:01:17","date_gmt":"2015-05-18T10:01:17","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=23954"},"modified":"2025-04-24T17:15:40","modified_gmt":"2025-04-24T09:15:40","slug":"advanced-svg-animation-css","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/advanced-svg-animation-css\/","title":{"rendered":"How to Animate SVGs with CSS"},"content":{"rendered":"<p><code>&lt;animate&gt;<\/code> and <code>&lt;animateMotion&gt;<\/code> are native elements for animating SVGs, but if you\u2019re more comfortable with CSS, you can use CSS Animation properties for the same purpose. In this post, we\u2019ll explore what can be achieved with CSS animation in SVG.<\/p>\n<p>CSS animation can also be a viable alternative to using JavaScript libraries like <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/snapsvg.io\/\">SnapSVG<\/a>. Let\u2019s see what we can achieve.<\/p>\n<h2>Creating the Shapes<\/h2>\n<p>First, we need to create the shapes and objects we wish to animate. Tools like <strong>Sketch<\/strong>, <strong>Adobe Illustrator<\/strong>, or <strong>Inkscape<\/strong> are perfect for this task.<\/p>\n<p>For this example, I have designed a scene with a cloudy sky and a rocket shooting upwards, complete with flames:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Rocket clouds SVG illustration\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/advanced-svg-animation-css\/create-objects.jpg\" width=\"700\"><\/figure>\n<p>Once your design is complete, export each object into SVG format. Using Sketch as an example, select your object, click <strong>Make Exportable<\/strong> at the bottom right of your window, choose SVG format, and then click Export {object-name}. Repeat this for each object.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Exporting SVGs from Sketch\" height=\"420\" src=\"https:\/\/assets.hongkiat.com\/uploads\/advanced-svg-animation-css\/export-svg.jpg\" width=\"700\"><\/figure>\n<h2>Insert the SVG into HTML<\/h2>\n<p>SVG code can be quite cluttered. Before using your SVGs, it\u2019s a good idea to clean up the code with a tool like <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/svg\/svgo\">SVGO<\/a>.<\/p>\n<p>Open <strong>Terminal<\/strong> or <strong>Command Prompt<\/strong> and install SVGO with this command:<\/p>\n<pre>[sudo] npm install -g svgo<\/pre>\n<p>Next, run the <code>svgo<\/code> command on your SVG file with the <code>--pretty<\/code> option to clean up the code:<\/p>\n<pre>svgo rocket.svg --pretty<\/pre>\n<p>To optimize multiple SVGs in a directory, use the following command assuming the directory is named <strong>\/images<\/strong>:<\/p>\n<pre>svgo -f images --pretty<\/pre>\n<p>Below is a comparison of SVG code before and after optimization:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"SVG code before after optimization\" height=\"391\" src=\"https:\/\/assets.hongkiat.com\/uploads\/advanced-svg-animation-css\/before-after-svgo.jpg\" width=\"700\"><\/figure>\n<p>Copy the cleaned code from the SVG file and paste it into an HTML file. Let\u2019s work within an 800px by 600px workspace. Remember to define the <code>width<\/code> attribute on the main <code>&lt;svg&gt;<\/code> element:<\/p>\n<pre>&lt;svg width=\"600\" height=\"420\" viewBox=\"0 0 600 600\" xmlns=\"https:\/\/www.w3.org\/2000\/svg\"&gt;\n  &lt;g fill=\"none\" fill-rule=\"evenodd\"&gt;\n    &lt;path d=\"M96.008 ...\" fill=\"#FFF\"\/&gt;\n    &lt;path d=\"M55.53 ...\" fill=\"#75C9EC\"\/&gt;\n    &lt;path d=\"M27.543 ...\" fill=\"#0096D5\"\/&gt;\n  &lt;\/g&gt;\n&lt;\/svg&gt;<\/pre>\n<p>Define an ID for each object you intend to animate, such as the rocket, flames, and clouds, so you can target them with CSS:<\/p>\n<pre>&lt;path id=\"cloud1\" d=\"M-24.205 ...\" opacity=\".4\" fill=\"#FFF\" fill-rule=\"evenodd\"\/&gt;\n&lt;path id=\"cloud2\" d=\"M128.42 ...\" opacity=\".3\" fill=\"#FFF\" fill-rule=\"evenodd\"\/&gt;\n&lt;path id=\"cloud3\" d=\"M13.043 ...\" opacity=\".2\" fill=\"#FFF\" fill-rule=\"evenodd\"\/&gt;\n&lt;path id=\"cloud4\" d=\"M84.954 ...\" opacity=\".1\" fill=\"#FFF\" fill-rule=\"evenodd\"\/&gt;\n\n&lt;g id=\"rocket\" fill=\"none\" fill-rule=\"evenodd\"&gt;\n  &lt;g id=\"flame\" fill=\"none\" fill-rule=\"evenodd\"&gt;\n    &lt;path d=\"M37.957.898s24.385 ...\" fill=\"#FF5B0D\"\/&gt;\n    &lt;path d=\"M30.482 ...\" fill=\"#FFD03D\"\/&gt;\n  &lt;\/g&gt;\n  &lt;path d=\"M96.008 ...\" fill=\"#FFF\"\/&gt;\n  &lt;path d=\"M55.53 ...\" fill=\"#75C9EC\"\/&gt;\n  &lt;path d=\"M27.543 ...\" fill=\"#0096D5\"\/&gt;\n&lt;\/g&gt;<\/pre>\n<h2>Animate Using CSS<\/h2>\n<p>It\u2019s time for some fun! Let\u2019s make the rocket soar into space. The rocket consists of two parts: the body and the flame.<\/p>\n<pre>#rocket {\n  transform: translate(260px, 200px);\n}<\/pre>\n<p>Here\u2019s what the rocket looks like on its own:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"SVG rocket illustration alone\" height=\"400\" src=\"https:\/\/assets.hongkiat.com\/uploads\/advanced-svg-animation-css\/rocket-alone.jpg\" width=\"700\"><\/figure>\n<p>To create the effect of the rocket moving upward, we\u2019ll make the clouds appear to fall. Here\u2019s the CSS for one of the clouds:<\/p>\n<pre>#cloud1 {\n  animation: fall 1s linear infinite;\n}\n\n@keyframes fall {\n  from {\n    transform: translateY(-100px);\n  }\n  to {\n    transform: translateY(1000px);\n  }\n}<\/pre>\n<p>We\u2019ll animate several clouds to fall at different speeds and starting positions on the X-axis:<\/p>\n<pre>#cloud2 {\n  animation: fall-2 2s linear infinite;\n}\n\n@keyframes fall-2 {\n  from {\n    transform: translate(200px, -100px);\n  }\n  to {\n    transform: translate(200px, 1000px);\n  }\n}<\/pre>\n<p>Here\u2019s how it looks now:<\/p>\n<p><iframe loading=\"lazy\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\" height=\"420\" src=\"https:\/\/jsfiddle.net\/agusesetiyono\/529L19zc\/1\/embedded\/result,html,css\" width=\"100%\"><\/iframe><\/p>\n<p>Let\u2019s bring the rocket to life with the following animation:<\/p>\n<pre>#rocket {\n  animation: popup 1s ease infinite;\n}\n\n@keyframes popup {\n  0% {\n    transform: translate(260px, 200px);\n  }\n  50% {\n    transform: translate(260px, 240px);\n  }\n  100% {\n    transform: translate(260px, 200px);\n  }\n}<\/pre>\n<p>And animate the rocket flame:<\/p>\n<pre>#flame {\n  animation: shake 0.2s linear infinite;\n}\n\n@keyframes shake {\n  0% {\n    transform: translate(55px, 135px) rotate(7deg);\n  }\n  20% {\n    transform: translate(55px, 135px) rotate(0deg);\n  }\n  40% {\n    transform: translate(55px, 135px) rotate(-7deg);\n  }\n  60% {\n    transform: translate(55px, 135px) rotate(0deg);\n  }\n  100% {\n    transform: translate(55px, 135px) rotate(0deg);\n  }\n}<\/pre>\n<p>With these CSS rules applied, the animation should now be active on our SVG elements.<\/p>\n<p>Here\u2019s our rocket blasting into space:<\/p>\n<p><iframe loading=\"lazy\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\" height=\"420\" src=\"https:\/\/jsfiddle.net\/agusesetiyono\/529L19zc\/2\/embedded\/result,html,css\" width=\"100%\"><\/iframe><\/p>\n<h2>Final Thoughts<\/h2>\n<p>Animating SVGs with CSS requires some effort, but this tutorial provides a solid foundation. There\u2019s much more you can explore and achieve with CSS animations on SVGs!<\/p>\n<p>Beginners might want to start with our introductory post: <a href=\"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphics-animation\/\" rel=\"nofollow\">A Look Into: Scalable Vector Graphics (SVG) Animation<\/a>, or explore the rest of our SVG series.<\/p>\n<div class=\"button\">\n  <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/svg-animation\/\">View Demo<\/a>\n  <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/hongkiat\/svg-animation\">Download Source<\/a>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>&lt;animate&gt; and &lt;animateMotion&gt; are native elements for animating SVGs, but if you\u2019re more comfortable with CSS, you can use CSS Animation properties for the same purpose. In this post, we\u2019ll explore what can be achieved with CSS animation in SVG. CSS animation can also be a viable alternative to using JavaScript libraries like SnapSVG. Let\u2019s&hellip;<\/p>\n","protected":false},"author":141,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[507,3498,4501],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Animate SVGs with CSS - Hongkiat<\/title>\n<meta name=\"description\" content=\"&lt;animate&gt; and &lt;animateMotion&gt; are native elements for animating SVGs, but if you&#039;re more comfortable with CSS, you can use CSS Animation\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/advanced-svg-animation-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Animate SVGs with CSS\" \/>\n<meta property=\"og:description\" content=\"&lt;animate&gt; and &lt;animateMotion&gt; are native elements for animating SVGs, but if you&#039;re more comfortable with CSS, you can use CSS Animation\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/advanced-svg-animation-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2015-05-18T10:01:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T09:15:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/advanced-svg-animation-css\/create-objects.jpg\" \/>\n<meta name=\"author\" content=\"Agus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bagusdesain\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Agus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-svg-animation-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-svg-animation-css\\\/\"},\"author\":{\"name\":\"Agus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\"},\"headline\":\"How to Animate SVGs with CSS\",\"datePublished\":\"2015-05-18T10:01:17+00:00\",\"dateModified\":\"2025-04-24T09:15:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-svg-animation-css\\\/\"},\"wordCount\":467,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-svg-animation-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/advanced-svg-animation-css\\\/create-objects.jpg\",\"keywords\":[\"CSS\",\"CSS Animation\",\"CSS Tutorials\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-svg-animation-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-svg-animation-css\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-svg-animation-css\\\/\",\"name\":\"How to Animate SVGs with CSS - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-svg-animation-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-svg-animation-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/advanced-svg-animation-css\\\/create-objects.jpg\",\"datePublished\":\"2015-05-18T10:01:17+00:00\",\"dateModified\":\"2025-04-24T09:15:40+00:00\",\"description\":\"&lt;animate&gt; and &lt;animateMotion&gt; are native elements for animating SVGs, but if you're more comfortable with CSS, you can use CSS Animation\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-svg-animation-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-svg-animation-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-svg-animation-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/advanced-svg-animation-css\\\/create-objects.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/advanced-svg-animation-css\\\/create-objects.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-svg-animation-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Animate SVGs with CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\",\"name\":\"Agus\",\"description\":\"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/bagusdesain\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/agus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Animate SVGs with CSS - Hongkiat","description":"&lt;animate&gt; and &lt;animateMotion&gt; are native elements for animating SVGs, but if you're more comfortable with CSS, you can use CSS Animation","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/advanced-svg-animation-css\/","og_locale":"en_US","og_type":"article","og_title":"How to Animate SVGs with CSS","og_description":"&lt;animate&gt; and &lt;animateMotion&gt; are native elements for animating SVGs, but if you're more comfortable with CSS, you can use CSS Animation","og_url":"https:\/\/www.hongkiat.com\/blog\/advanced-svg-animation-css\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2015-05-18T10:01:17+00:00","article_modified_time":"2025-04-24T09:15:40+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/advanced-svg-animation-css\/create-objects.jpg","type":"","width":"","height":""}],"author":"Agus","twitter_card":"summary_large_image","twitter_creator":"@bagusdesain","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Agus","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/advanced-svg-animation-css\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/advanced-svg-animation-css\/"},"author":{"name":"Agus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd"},"headline":"How to Animate SVGs with CSS","datePublished":"2015-05-18T10:01:17+00:00","dateModified":"2025-04-24T09:15:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/advanced-svg-animation-css\/"},"wordCount":467,"commentCount":4,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/advanced-svg-animation-css\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/advanced-svg-animation-css\/create-objects.jpg","keywords":["CSS","CSS Animation","CSS Tutorials"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/advanced-svg-animation-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/advanced-svg-animation-css\/","url":"https:\/\/www.hongkiat.com\/blog\/advanced-svg-animation-css\/","name":"How to Animate SVGs with CSS - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/advanced-svg-animation-css\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/advanced-svg-animation-css\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/advanced-svg-animation-css\/create-objects.jpg","datePublished":"2015-05-18T10:01:17+00:00","dateModified":"2025-04-24T09:15:40+00:00","description":"&lt;animate&gt; and &lt;animateMotion&gt; are native elements for animating SVGs, but if you're more comfortable with CSS, you can use CSS Animation","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/advanced-svg-animation-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/advanced-svg-animation-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/advanced-svg-animation-css\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/advanced-svg-animation-css\/create-objects.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/advanced-svg-animation-css\/create-objects.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/advanced-svg-animation-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Animate SVGs with CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd","name":"Agus","description":"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.","sameAs":["https:\/\/x.com\/bagusdesain"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/agus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6em","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23954","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/141"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=23954"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23954\/revisions"}],"predecessor-version":[{"id":74113,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23954\/revisions\/74113"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=23954"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=23954"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=23954"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=23954"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}