Building Custom Animations With SVGs in CSS

The idea of building custom CSS animations with scalable vector graphics (SVGs) can sound quite intimidating to you, as it does not require in-depth knowledge to get started. With just an understanding of the basics, you can turn something boring into an impressive one to enhance user experience and jazz up your website. However, a walk through the fundamental steps of SVG optimization and animation will help you in the long run.

CSS is used to animate and style scalable vector graphics (SVG) similar to how we use HTML elements. There's no one way to animate SVGs in CSS. You can do so by using the tag in the SVG code. You can also leverage libraries such as Snap.svg, SVG.js, and others that help in building custom animations.

To learn it all‌, let’s dive deep into it.

Building custom animations with CSS

Create your custom SVG design

There are some great online tools like Inkscape, Haikei, Illustrator for creating easy to complex graphics, abstract shapes with just a few clicks.

We will move forward with a design created in the illustrator. Once you do so and embed it on a web page, you can export it from the editor and clean it up so that the code is ready for use. Here’s how you have to proceed further to accomplish this task.

File > Save as > Choose .svg from the dropdown menu of file extension.

If you wish to see the SVG code, you can open the same SVG file in a code editor to view or edit it.

Cleaning up and optimizing the SVG

As you create an SVG, there are some extra code lines included which are of obsolete necessity. The output won’t be optimized and clean as expected because of a lot of redundant information like empty groups, metadata from the editor, comments, default values, non-optimal values, and others. This is the reason optimization is required.

You can make use of SVGO (A Node.js tool) that reduces the file size and saves the path with unique IDs. Doing so helps in preventing any issues with several animated SVGs on the same page.

In the image below, we have showcased the same process using an SVG editor.

Image source

We can safely convert or remove these without affecting the rendering process of SVG. If you didn't create the SVG yourself, it is certain that it won’t be in an optimal position. We recommend ‌you use a standalone optimisation tool for it.

You can also give different shape class names so that you can select them in CSS for various tasks. Here’s how you can do it.

<svg version="1.1" id="wufoo-ad" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400"
 enable-background="new 0 0 400 400" xml:space="preserve">

  <!-- background -->
  <rect class="wufoo-background" fill="#D03E27" width="300" height="300" />

  <!-- logo letters -->
  <path class="wufoo-letter" fill="#F4F4F4" d="M60.858,129...." />
  <path class="wufoo-letter" fill="#F4F4F4" d="..." />
     <!-- etc -->

  <!-- dinosaur -->
  <g class="trex">
     <path ... />
     <path ... />
  </g>

</svg>

Code source

Inserting the SVG

The SVG can be copied and pasted directly into the HTML, where you want to display the ad. But to avoid sloping up the template, we must move forward by inserting the SVGs as follows.

<aside class="sidebar">
  
   <div class="module module-ad">
      
       <?php include("ads/wufoo.svg"); ?>

   </div>

   …

It's time to animate

Now that you are ready with all custom design shapes, it's time we learn how to animate SVG. Since we have these shapes in DOM. So, we can target these shapes like any other HTML element and style them as per your choice. Below are some methods to animate your designs.

• Words fade in/out

In this style, each word shows for one second. So we will animate it in a way where the word shows for 10% of the time as follows.

@keyframes hideshow {
  0% { opacity: 1; }
  11% { opacity: 1; }
  16% { opacity: 0; }
  99% { opacity: 0; }
}

Further, we will target the first word and animate it to show for 10 seconds, meaning 10% of one second.

.text-1 {
  animation: hideshow 10s ease infinite;
}

The next ones will initially be hidden and we will use the same animation to start a bit later. 0.5 seconds is accommodated between the animations for the fading out time period of the word before it.

.text-2 {
  opacity: 0;
  animation: hideshow 10s 1.6s ease infinite;
}
.text-3 {
  opacity: 0;
  animation: hideshow 11s 4s ease infinite;
}

• Popping letters

In this style, the letters of your custom design will zoom in and out in a synchronized way. An example is given below.

To include this animation in your custom CSS animation design, we will animate only five seconds long but will let it run forward and backward. This way, the 10-second timeline will be completed.

.wufoo-letter {
  animation: kaboom 5s ease alternate infinite;
  &:nth-child(2) {
    animation-delay: 0.11s;
  }
  &:nth-child(3) {
    animation-delay: 0.22s;
  }
  &:nth-child(4) {
    animation-delay: 0.33s;
  }
  &:nth-child(5) {
    animation-delay: 0.44s
  }
}
@keyframes kaboom {
  91% {
    transform: scale(1.0);
  }
 100% {
    transform: scale(1.1);
  }
}

• Clickable ad

The SVG CSS animation can be scaled to any size causing no harm to their quality. So, if we wish to make a responsive ad, we will make an inline SVG as follows.

Note: We will use the ol’ padded box technique and maintain the aspect ratio.

<div class="wufoo-ad-wrap">
  <svg class="wufoo-ad">
     ...
  </svg>
</div>
.wufoo-ad-wrap {
  height: 0;
  padding-top: 100%;
  position: relative;
}
.wufoo-ad {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

We have created this ad with the idea that the wrap will always be a perfect square with respect to its width. This way, the SVG can be positioned into the perfect square and resize easily.

Tip: Instead of using division command for the wrap, we recommend you to use a href command. Just to ensure that you set a to be displayed: block;.

• Dinosaur Last

In this animation, the dinosaur peaks its head up as soon as the words are done. Since the dinosaur itself is made of several s, it can be targeted together by targeting the tag or group tag that wraps them all. We will proceed with the same in keyframes.

@keyframes popup {
  0% {
    transform: translateY(150px);
  }
  33% {
    transform: translateY(20px);
  }
  38% {
    transform: translateY(150px);
  }
  100% {
    transform: translateY(150px);
  }
}

The animation runs actually for 10 seconds but you will only see it for 3 seconds as the dinosaur will be moved far below when the translateY(150px) is in effect.

However, when this animation is applied, you need to keep in mind the following points.

• Ensure that the dinosaur is hidden at first.
• The animation starts right after the words are done with the fade-in/out effect as it is delayed.

.trex {
  transform: translateY(151px);
  animation: popup 10s 6.6s ease infinite;
}

You will see the dinosaur pop out at the last second.

Common use cases of animating SVG with CSS

Here’s a list of some practical use cases of animating SVG with CSS that will make you understand why we need it.

Icons

Icons are a common use case of animated SVGs that show micro-interactions and state changes. Common use cases in icons include menu toggling, loading, uploading, playing, and pausing a video. These are also known to guide the user to the next action. For instance: on an onboarding tour.

Illustrations

Illustrations are also a popular use case of SVG CSS animation that can be included in a product. They often demonstrate what needs to be done to generate data on the dashboard. You can find them bringing dimensionality and fun to landing pages of different brands. For example stickers and animated emojis.

It’s a fun task to bring your custom designs to life. However, many times you may feel overwhelmed to tackle the complicated animations. We assure you that with the above information provided, you can accomplish any task of building custom animations.