How To Make SVG Animation in CSS

How To Make SVG Animation in CSS

Hello friends today we gonna learn about How To Make SVG Animation in CSS. So read this article, How To Make SVG Animation in CSS step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

Guide: How To Make SVG Animation in CSS

SVG animation can be done using native elements such as and . But for those more familiar with CSS animation, don’t worry, we can also use CSS animation properties for animated SVGs.

CSS animation can also be an alternative way to use a JavaScript library such as SnapSVG. In this post, we’ll see what we can potentially deliver with CSS animation in SVG.

back to menu ↑

1. Create the shapes

First of all, we will have to draw the shapes and objects that we want to animate. You can use applications such as Sketch Adobe Illustrator, or Inkscape to make one.

For this example, I’ve drawn a cloudy sky as a background, and a rocket shooting up, including flames:

When we are done with the drawing, we need to export every object we created to SVG.

I’m going to use Sketch as an example for this step. Select the object you want to turn into SVG format. Click at the bottom right of your window Make exportable. Choose SVG format and click Export {object name}. You must do this object by object.

back to menu ↑

2. Insert the SVG into HTML

When you open the SVG file in a code editor, you will notice that SVG codes are quite messy. So let’s clean up first before implementing the SVG file up the code and optimize it with this command line tool called SVGO.

Launch Terminal or Command Prompt, and install SVGO with this command line:

[sudo] npm install -g svgo

Match the svgo command to the SVG file with -pretty to produce readable SVG code:

svgo rocket.svg – free

If you have multiple SVGs in a directory, you can optimize them all at once. Assuming the directory has a name /Pictures, then from the parent directory use this command:

svgo -f images – free

Let’s see the difference before and after using SVGO.

Copy the code in the SVG file and paste it into an HTML file. We will be working on an 800px by 600px wide workspace, so let’s not forget to define the width on the SVG element.

The SVG is set in the HTML file. We will have to define an ID for each object so that we can select them later in CSS.

For this tutorial, we need to define the ID for the missile and the flames and some clouds. In order for the objects to handle the animation phase later, we need to add ID card – you can also use class – for any object. At this stage, the code looks like this:

back to menu ↑

3. Animate with CSS

Now let’s have some fun. The plan is to boost the missile up into space. The missile is split into two groups; the missile itself and the flame.

First of all, we place the rocket in the center of the workspace, as follows:

#rocket {transform: translate (260px, 200px);}

What you see is this:

To make the rocket look like it’s going up, we need to create the illusion that clouds are falling. The CSS we use for this is:

# cloud1 {animation: fall 1s linear infinite;} @ keyframes fall {from {transform: translateY (-100px);} to {transform: translateY (1000px)}}

To make it look even more realistic, let’s animate four clouds and make them “fall” at different speeds. We also place them differently from the X axis.

The second cloud has the following code:

# cloud2 {animation: fall-2 2s linear infinite;} @ keyframes fall-2 {from {transform: translate (200px, -100px);} to {transform: translate (200px, 1000px)}}

Note that we’ve moved cloud # 2 a bit to the right, by 200px with translate. At this stage, the result should look like this.

Next, let’s make the rocket come to life. We will assign an animation keyframe as follows:

#rocket {animation: popup 1s convenience infinite;} @ keyframes popup {0% {transform: translate (260px, 200px);} 50% {transform: translate (260px, 240px);} 100% {transform: translate (260px, 200px);}}

And also add animation to the rocket flame:

#flame {animation: shake .2s linear infinite;} @ keyframes shake {0% {transform: translate (55px, 135px) rotate (7deg); } 20% {transform: translate (55px, 135px) rotate (0deg); } 40% {transform: translate (55px, 135px) rotate (-7deg); } 60% {transform: translate (55px, 135px) rotate (0deg); } 100% {transform: translate (55px, 135px) rotate (0deg);

Turn right! Now that our codes are all set, the animation should work on our SVG.

Watch our rocket launch into space.

back to menu ↑

Final Thought

Animation isn’t the easiest feature in CSS to understand. But hopefully you will find this tutorial as a good starting point to further explore CSS Animation on SVG; you’d be surprised to know what you can accomplish with CSS Animation at hand.

If you want to get started with the basics, you can start here with this post: A Look Into: Scalable Vector Graphics (SVG) Animation or follow the rest of the SVG series.

  • View demo
  • Download source
back to menu ↑

How To Make SVG Animation in CSS: benefits

  • The How To Make SVG Animation in CSS tutorial is free .
  • This guide already helps so many users follow up with interest in a timely manner.
  • The price of the How To Make SVG Animation in CSS guide is free.

back to menu ↑

Faq

Tutorial summary of How To Make SVG Animation in CSS

In this guide, we told you about the How To Make SVG Animation in CSS; please read all steps so that you understand How To Make SVG Animation in CSS in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the How To Make SVG Animation in CSS, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the How To Make SVG Animation in CSS tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop


back to menu ↑

Final note

I hope you like the guide How To Make SVG Animation in CSS. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.

For our visitors: If you have any queries regards the How To Make SVG Animation in CSS, then please ask us through the comment section below or directly contact us.
Education: This guide or tutorial is just for educational purposes.
Misinformation: If you want to correct any misinformation about the guide “How To Make SVG Animation in CSS”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide How To Make SVG Animation in CSS, then kindly contact us.
Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.

Compsmag
Logo
Shopping cart