Css style

A Beginner’s Guide to SVG Animation with CSS

Scalable vector graphics (SVG) are more than just image files. As an XML application, SVGs contain markup that looks and functions like HTML. You can also use them in conjunction with CSS and JavaScript code. This makes it possible to animate SVG files, creating complex images that work well for web design and other dynamic environments.

USE VIDEO OF THE DAY

But how do you make an SVG animation? Start with an SVG shape, animate it using CSS, and apply these principles to using animation in your own work.

Animate SVGs with HTML and CSS

Although you can use JavaScript to animate SVGs programmatically, CSS now also supports animations. You can find all code examples at the CodePen for this project.

Building an SVG image in HTML

The first step in this process is to create the SVG image that you will be working with. You can find the SVG markup in the HTML panel on CodePen.

Structure SVG

Although SVGs share a similar format to HTML, the tags you use to create them are different. An SVG has opening and closing tags () which can contain a variety of different properties. In our case, we use identifier and viewBox Properties. The id property works like any other HTML identifier, providing you with a unique identifier to use in your CSS/JS. The viewBox property defines the size of our SVG.

<!-- SVG with a responsive size -->

<svg id="MUOSVGAnimation" viewBox="0 0 800 600">
<!-- SVG content -->
</svg>

You can use the width and height properties instead, as shown in the following example. However, viewBox creates a responsive SVG that matches the window size without breaking its aspect ratio.

<svg id="MUOSVGAnimation" width="800" height="600">
<!-- SVG content -->
</svg>

SVG shapes

You can create detailed images with SVGs, with an array of different shape tools at your disposal. This SVG example uses three of the available shapes, but there are many more. Each of the shapes in this example has a unique ID that CSS animations can use later.

  • SVG Ellipse: This is a circle/oval tool. It specifies properties for y/x axis radius (rx/ry), fill color, and stroke width. It is important to remember that the radius you choose with this tool will be half the diameter of the shape.

<ellipse id="circle" rx="100" ry="100" fill="#ffed00" stroke-width="0"/>
  • SVG Rect: The SVG rect tool creates a square or a rectangle. This one has properties for width/height, transform, fill color and stroke width.
<rect id="square" width="200" height="200" transform="translate(300 200)" fill="#05f"
stroke-width="0"/>
  • SVG Polygon: Use an SVG Polygon to define a specific number of points and create arbitrary shapes of different sizes. The polygon in the example is three-sided, making it a triangle, and you can see the position of each plotted point in its properties. Along with that, we have properties for the position, fill color, and line width of the triangle.


<polygon id="triangle" points="15,-97 115,102 -84,102 15,-97"
transform="translate(0,0)" fill="#f00" stroke-width="0"/>

Once the animation is in place, the shapes will line up next to each other.

These three SVG shapes are some of the most common, but there are others to choose from. You can use the following shapes when working with SVG animation:

  • SVG Circle: This shape is similar to an ellipse, but it still has equal X and Y radii.
  • SVG line: An SVG line is a single line segment with two points, one at each end.
  • SVG Polyline: Polylines are like baselines, except they can have more than two points.
  • SVG Polygon: SVG polygons are like rectangles, except they can have more than four points, making complex shapes possible.
  • SVG path: SVG paths work the same way as Adobe Photoshop’s pen tool. Lines can connect like a polyline/polygon, but curves can also be applied to them.

How to Animate SVGs with CSS

Now that you have shapes in your SVG, it’s time to move on to CSS animation. Each of the shapes has a different animation to illustrate some of the options you have, but there’s a lot more to explore with your own designs. The circle moves across the screen, the corners of the square round out, and the triangle rotates. All of these use CSS keyframes to create smooth animations.

Moving the circle using transform and translation

The circle in the SVG example moves from the bottom to the top of the screen during its animation cycle. You need to assign an animation to the circle before it can move, via a CSS property:


animation: circle_anim 2000ms linear infinite normal forwards
}

The first word of value, circle_anim, is a name for the animation. It works for two seconds (2000ms). He has a linear curve that maintains its constant speed and is configured to perform a infinite number of times in the forward direction. You can use keyframes to define individual phases of the animation:

@keyframes circle_anim {
0% { transform: translate(155px, 305px) }
45% { transform: translate(155px, -123px) }
50% { transform: translate(-123px, -123px) }
55% { transform: translate(-123px, 728px) }
60% { transform: translate(155px, 728px) }
100% { transform: translate(155px, 305px) }
}

There are six keyframes in this animation, so the circle will move to six different places in each cycle. The transform: translate The property defines the position of the circle at each step. At 0%, the circle is in the middle of the screen and moves up and out of view by 45%. From 50%, it moved to the left of the screen before dropping below the window at 55%. The circle returns to its 60% horizontal position and the animation is 100% complete with the circle back in the middle of the screen.

Animate the border radius property of the square

The square in the example provides a good reference for general property animations. As long as you know the correct syntax to use, you can animate any CSS property. The border-radius property is a good demonstration of this. The square has sharp corners that turn into rounded corners and then back to square corners.

#square { animation: square_anim 2000ms ease-in-out infinite normal forwards }

The square animation is called square_anim and has a runtime of two seconds. The ease of entry The curve slows down the animation at the start and end, creating a smooth effect.

@keyframes square_anim {
0% { rx: 0px; ry: 0px }
45% { rx: 40px; ry: 40px }
55% { rx: 40px; ry: 40px }
100% { rx: 0px; ry: 0px }
}

As you can see, this animation has four keyframes. The X and Y border radius changes from 0px to 40px between 0% and 45%, stopping at 40px up to 55%. It then reverts to 0px for each ray the moment the animation reaches 100%.

Rotate SVG triangle with transform

The final SVG animation in the example is the simplest, with the triangle rotating around its center point. The shape completes a full revolution every two seconds and continues to run ad infinitum. It has a fade curve that slows down the animation at the end. The animation is called triangle_anim.

#triangle { animation: triangle_anim 2000ms ease-out infinite normal forwards }

This animation has two keyframes, one at 0% and the other at 100%. The Transform property rotates the triangle from 0 degrees at 0% to 360 degrees at 100%, creating a full rotation.

@keyframes triangle_anim {
0% { transform: translate(644px, 297px) rotate(0deg) }
100% { transform: translate(644px, 297px) rotate(360deg) }
}

How to animate other properties

The three animations described above are a good starting point when working with SVGs, but you’ll probably want to push this further. You can use the CSS Animation Ruler to adjust almost any property value you can assign to your SVG. This includes basic values, such as sizing and positioning, as well as more advanced values, such as borders, shadows, and blending modes.


In the rare case where CSS can’t do the job, you can use JavaScript code to animate SVG images. You can find plenty of guides to help you out once you feel ready to take the next step with your SVGs.

Create your own SVG animations

Whether you’re a web designer, software developer, or just a creative person, SVG animations can be fun and satisfying to make. You can find many resources on the web that can help you with web animation once you have the basics down.