How to Animate SVGs with CSS

By . in Coding. Updated on .

<animate> and <animateMotion> are native elements for animating SVGs, but if you’re more comfortable with CSS, you can use CSS Animation properties for the same purpose. In this post, we’ll 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’s see what we can achieve.

Creating the Shapes

First, we need to create the shapes and objects we wish to animate. Tools like Sketch, Adobe Illustrator, or Inkscape are perfect for this task.

For this example, I have designed a scene with a cloudy sky and a rocket shooting upwards, complete with flames:

Rocket and clouds illustration

Once your design is complete, export each object into SVG format. Using Sketch as an example, select your object, click Make Exportable at the bottom right of your window, choose SVG format, and then click Export {object-name}. Repeat this for each object.

Exporting SVGs

Insert the SVG into HTML

SVG code can be quite cluttered. Before using your SVGs, it’s a good idea to clean up the code with a tool like SVGO.

Open Terminal or Command Prompt and install SVGO with this command:

 [sudo] npm install -g svgo

Next, run the svgo command on your SVG file with the --pretty option to clean up the code:

 svgo rocket.svg --pretty

To optimize multiple SVGs in a directory, use the following command assuming the directory is named /images:

 svgo -f images --pretty

Below is a comparison of SVG code before and after optimization:

Before and after SVG optimization

Copy the cleaned code from the SVG file and paste it into an HTML file. Let’s work in a workspace of 800px by 600px wide. Don’t forget to define the width on the SVG element:

<svg width="600" height="420" viewBox="0 0 600 600" xmlns="https://www.w3.org/2000/svg">
  <g fill="none" fill-rule="evenodd">
    <path d="M96.008 ..." fill="#FFF"/>
    <path d="M55.53 ..." fill="#75C9EC"/>
    <path d="M27.543 ..." fill="#0096D5"/>
  </g>
</svg>

Define an ID for each object, like the rocket and flames, as well as some clouds, to use in CSS animations:

<path id="cloud1" d="M-24.205 ..." opacity=".4" fill="#FFF" fill-rule="evenodd"/>
<path id="cloud2" d="M128.42 ..." opacity=".3" fill="#FFF" fill-rule="evenodd"/>
<path id="cloud3" d="M13.043 ..." opacity=".2" fill="#FFF" fill-rule="evenodd"/>
<path id="cloud4" d="M84.954 ..." opacity=".1" fill="#FFF" fill-rule="evenodd"/>

<g id="rocket" fill="none" fill-rule="evenodd">
  <g id="flame" fill="none" fill-rule="evenodd">
    <path d="M37.957.898s24.385 ..." fill="#FF5B0D"/>
    <path d="M30.482 ..." fill="#FFD03D"/>
  </g>
  <path d="M96.008 ..." fill="#FFF"/>
  <path d="M55.53 ..." fill="#75C9EC"/>
  <path d="M27.543 ..." fill="#0096D5"/>
</g>

Animate Using CSS

It’s time for some fun! Let’s make the rocket soar into space. The rocket consists of two parts: the body and the flame.

#rocket {
  transform: translate(260px, 200px);
}

Here’s what the rocket looks like on its own:

Rocket image

To create the effect of the rocket moving upward, we’ll make the clouds appear to fall. Here’s the CSS for one of the clouds:

#cloud1 {
  animation: fall 1s linear infinite;
}

@keyframes fall {
  from {
    transform: translateY(-100px);
  }
  to {
    transform: translateY(1000px);
  }
}

We’ll animate several clouds to “fall” at different speeds and from different positions on the X-axis:

#cloud2 {
  animation: fall-2 2s linear infinite;
}

@keyframes fall-2 {
  from {
    transform: translate(200px, -100px);
  }
  to {
    transform: translate(200px, 1000px);
  }
}

Here’s how it looks now:

Let’s bring the rocket to life with the following animation:

#rocket {
  animation: popup 1s ease infinite;
}

@keyframes popup {
  0% {
    transform: translate(260px, 200px);
  }
  50% {
    transform: translate(260px, 240px);
  }
  100% {
    transform: translate(260px, 200px);
  }
}

And animate the rocket flame:

#flame {
  animation: shake 0.2s linear infinite;
}

@keyframes shake {
  0% {
    transform: translate(55px, 135px) rotate(7deg);
  }
  20% {
    transform: translate(55px, 135px) rotate(0deg);
  }
  40% {
    transform: translate(55px, 135px) rotate(-7deg);
  }
  60% {
    transform: translate(55px, 135px) rotate(0deg);
  }
  100% {
    transform: translate(55px, 135px) rotate(0deg);
  }
}

With these codes in place, the animation should now be visible on our SVG.

Here’s our rocket blasting into space:

Final Thoughts

Animating with CSS isn’t the simplest task, but this tutorial should serve as a solid introduction to using CSS Animation with SVG. There’s a lot more to discover and achieve with CSS animation!

For beginners, you can start here with this post: A Look Into: Scalable Vector Graphics (SVG) Animation or explore the rest of our SVG series.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail