Wondering how we did that rocket animation on our LaunchPad Lab site when you hover over the logo? Well, we used a little something called CSS Animations. This is a great lightweight alternative to using javascript or dare I say…flash to create animations.

Rocket Animation: How it’s done

Step 1: File Prep

First you’ll want to create the vector that you want to animate and export it as an SVG. You can then use SVGOMG to optimize your SVG by getting rid of any unnecessary lines of code that programs like Illustrator tend to include.

Single vs. Multiple Paths Tip: If you don’t have a single path, each path will animate separately; if you want one continuous drawing, this is not ideal. However, if you do want paths to animate at different times, you can simply add classes within your SVG file and animation-delays in your CSS.

Step 2: HTML

The HTML is relatively simple here, as you just need to embed the SVG in your HTML file. Unfortunately, if you just use the image tag the animation won’t work. An alternative we used was to put the SVG into a partial and simply render the partial on the HTML page.

You will also need to add a class in your svg tag. In our case we add the following:

class="logo-rocket"

Step 3: CSS

There are two key CSS properties that we used to create this rocket animation: animation and @keyframes. The animation property does exactly what you’d think it does—it animates your SVG. So in our rocket example “draw” is the name of the keyframe, “6.0s” is the duration of the animation, “linear” is speed, and “forwards” is the direction of the animation. Since the rocket is built as stroke in Illustrator, I need to use the stroke-dasharray and stroke-dashoffset properties which do the following:

Basically, you set these two equal to each other so that you don’t see dash marks. You need to make the number large enough to equal the length of your drawing (as if it were stretched out to a vertical line). Here’s the animation styles we needed for the rocket animation:

.logo-rocket {
    @include animation(draw 6.0s linear forwards);
    @include animation-delay(-3.0s);
    stroke-dasharray: 1800;
    stroke-dashoffset: -1800;
}

Keyframes describe the progression of the animation, so it starts with the styles within 0% and by the end of the animation it will take on the styles listed within 100%. Here’s the keyframe we needed for the rocket animation:

@include keyframes(draw){
    0% {stroke-dashoffset: none; }
    100% {stroke-dashoffset: 1; fill-opacity: 1;}
}

The Final Product

See the Pen CSS Animation with SVGs by Monique Marchwiany (@marchwiany) on CodePen.

CSS Animation Properties

Property Values

Here’s the full list of properties you can add to your animation, giving you plenty of control over how your animations are played.

Browser Support

CSS animations work in most major browsers, but it’s always important to check and make sure your animations are working on the browsers you need it to. Check what W3Schools lists in terms of browser support for this property.

For those browsers that can’t handle your awesome CSS animations, you have the option to include a png fallback to replace the SVG in those browsers by implementing SVGeezy (an easy-to-use JS plugin).

Use Animations Responsibly

In the words of Spiderman’s Uncle Ben “With great power, comes great responsibility.” Animations can really add a nice touch to your website, but adding too many animations can distract from important content. When it comes to design and interactivity, it’s important to have a purpose for adding anything to a website or application. “Because it looks cool” isn’t enough; rather, make sure it has meaning. It’s always exciting learning new skills which makes it easy for us to get a little carried away sometimes. We’re all guilty of it, but remember to take a step back to consider if it is significantly adding to the overall user experience. And when it does, animate away!

Monique Silva

Director of Design

Monique's interest in design started at a young age, but it wasn't until going to school at the University of Illinois that she discovered her love of UX & UI design. With degrees in both Graphic Design and Psychology, she has developed a strong understanding of how design can enrich a user's overall experience. She also enjoys running outdoors, reading, and baking/eating plenty of baked goods.

Reach Out

Ready to Build Something Great?

Partner with us to develop technology to grow your business.

Get our latest articles delivered to your inbox