Rocket Animation: CSS Animations Using SVGs

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:

• stroke-dasharray: Creates dashed lines
• stroke-dashoffset: Indicates where the dasharray starts

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.

• animation: Allows multiple animation properties in a single style rule. Not all properties need to be used but must be specified in the following order: name duration timing-function delay iteration-count direction fill-mode play-state
• animation-delay: How long the animation should wait before playing
• animation-direction: The direction the animation plays
• animation-duration: How long the animation should take to complete once
• animation-fill-mode: The styles applied by the animation either before or after it plays
• animation-iteration-count: How many times you want the animation to play before stopping
• animation-name: The name of the keyframe
• animation-play-state: Indicates if an animation is playing or paused
• animation-timing-function: The speed curve of the animation

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!

×

Subscribe to Our Newsletter

If you made it this far, you should sign up for our monthly newsletter. Get our latest articles and insights delivered each month.

First Name*

Last Name*

Email*