Animating SVG with CSS

Share this:

There isn't just one way to animate SVG. There is the <animate> tag that goes right into the SVG code. There are libraries that help with it like Snap.svg or SVG.js. We're going to look at another way: using inline SVG (SVG code right inside HTML) and animating the parts right through CSS.

I played with this personally recently as my Alma mater Wufoo was looking to freshen up the advertising graphic we're running here. My latest design around here uses SVG quite a bit and I thought this would be another perfect opportunity to use it some more.

1. Design the Ad / Have a Plan

This might seem like an how to draw an owl moment, but this article is about animation so let's get there as quickly we can.

My plan for this ad was to make a super simple Wufoo ad with their classic logo, colors, and general branding. Then add a little flair.

Make the letters kind hop off the page a little. Wufoo is a fun word, let the letters have some fun.

Back in the day we made a T-Shirt with dinosaurs on the front and on the back it said "Fast. Smart. Formidable." Which are traits of both dinosaurs and Wufoo, not to mention the fun little play on words with FORMidble. Let's make those fade in and out.

To make the connection with the dinosaur thing complete, we'll have a T-Rex head pop up from the bottom curiously, then zoom away. The word "Fast." will come in as he zooms away which is another nice little connection.

I put all the parts together in Illustrator.

Notice how the logo and tagline text are outlines. That means they are just vector shapes and will render just perfectly as-is in the SVG, as <path>s. The text you see there "Fast." is left as text in Illustrator.

When I save this out from Illustrator, that will be left as a <text> element.

2. Save as SVG

Illustrator can save this directly as SVG:

You can open that SVG file in a code editor and see the SVG code:

3. Clean Up the SVG, Give Shapes Classes

You might wanna run it through SVGO to optimize it and remove the DOCTYPE and stuff. But more importantly for this post, you'll want to give the the different shapes class names, that way we can select them in CSS and do stuff!

The extra 0.5s on each is to accommodate the fading out time period of the word before it.

Letter Pops

As soon as those letters are done animating, we'll have the letters in WUFOO do their jiggle jump thing, like this:

The trick here is that we'll make the animation only 5 seconds long, but run it once forwards and once backwards. That way it matches our 10 second timeline, is placed right in the middle where we want it, and we only need to scale in one direction, because when it reverses it will scale back.

Each letter has a slight bit of delay so they happen off-kilter a bit:

The above is in SCSS just for brevity, and does not include any prefixing (as you would need in production).

I feel like animation-delay is a property that would benefit from native randomization in CSS. Would be neat to see the letters be randomly delayed just a bit each time.

Dinosaur Last

As soon as the words are done, the dinosaur will peak its head up. Even though the dinosaur is made up of lots of <path>s, we can target them all together by targeting the <g> (group) tag that wraps them all.

Because using translate to animate position is better, we'll do that in the keyframes:

We wanted this animation to "last" about 3 seconds. It actually runs in 10 second loops, but you'll only see it do stuff for 3 seconds. When the translateY(150px) is in effect, the dinosaur is moved so far below, you don't see anything. By 37% of that animation (around 3 seconds) you'll have seen it move slowly up, then quickly back down).

When we apply this animation, we'll make sure that:

The dinosaur is hidden at first
The animation is delayed so it starts right after the words are done with their fade in/out dance.

The dinosaur pops down right at the last second, which is when the word "Fast." pops back onto the screen (because all the animations are set to infinite, which re-runs them forever). That's a bit of fun synergy there.

6. Making it a responsive / clickable ad

One of the beautiful things about SVG is that it's scaleable to any size without losing quality. To make an inline SVG like this scale while maintaining its aspect ratio, we can use the ol' padded box technique.

Share this:

Comments

Animating with CSS has always been an issue because it’s percent based and not time based. This is one of the reasons why GSAP is so popular. SVG animation (SMIL) on the other hand does a pretty good job but has no support in IE at all. I’m in the process of writing smil2css to circumvent this problem. It essentially converts SMIL to CSS animations, much like your article is suggesting.

I haven’t tested with IE11 yet as I don’t have Win8, but it works fine in IE10 on Win7. There are a lot of browser issues with SVG right now. This one, for example still needs to make its way into a Chrome release.

Never thought about using SVG as a code snippet; always just linked to them like I would a regular png or jpg. Now I can see how easy it is, I’m going to be using them like this all the time.
Great little tutorial, Chris. Thanks!

Tom, I haven’t tested it, but I’d imagine that when the SVG is loaded in as a style asset, it cannot access its parent document’s stylesheet. It will definitely work, though, if you embed the relevant CSS into a <style> within the SVG file.

I was messing around with SVG / CSS animation last week and it took a while to figure out the syntax. Though I did manage to implement a variation of the popular “line drawing” animation: http://codepen.io/shshaw/pen/JDEsG

My main struggle was with how to handle the animation-delays for individual elements in an elegant way, but by separating out the different stages of the animation ( line drawing, stroke fade out, fill fade in ), I was able to stagger the elements’ animations the way I wanted.

Nice work! I’ve been doing a lot of SVG animation lately, good to keep this technique in mind. Another advantage: you can tweak the animation for different screen sizes using media queries. Can’t do that with just inline SVG animations, as far as I know.

SVG animations (SMIL) can animate CSS properties, so you can animate with percent values. Media queries might get a bit messy for positioning, but would work fine for hiding/showing. It’s give and take, really, because CSS can’t do everything that SMIL can. One example would be animating along a path.

If you’re only going to be using the image in the browser (and if your server is set to always give the correct MIME type for .svg files), you can usually skip the doctype. If you’re going to be cutting & pasting your code into an html5 page (or importing it server-side via php), then you can also skip the namespace declarations.

Expanding on what’s already been said, SVGs seem to be supported poorly on mobile browsers. Most of the SVGs on this site are completely blank squares over here on Mobile Safari (iOS 6.1.6) and animations seem to be right out.

SVG’s, including animated ones (both JS and pure CSS) work like a charm on my nexus devices (5 & 7). It also seems to work fine on the xcode iDevice simulator, though of course, that doesn’t say much ;).

Very nice. Is there already a software that can easily generate the css code for you. Just select the animation you want, and poof! There you have it. Everything is neatly coded [HTML+CSS] after exporting/saving it. :D

because of the nature of SVG (Vector Graphics) you’ll need a program that can use and edit vectors straight out of the box; photoshop can’t. I’m sure there are other options than illustrator out there though!

You can save out of Illustrator CC with classes and IDs in the SVG code.
CLASS: To give an object a named class, apply a Graphic Style with that name.
ID: To apply an ID, name a layer what you want your ID and place your object on it.

👋

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress and powered up by Jetpack. It is made possible through sponsorships from products and services we like.