By using this site, you agree to the Privacy Policy and Terms of Use.
Accept
rocoderesrocoderes
  • Home
  • HTML & CSS
    • Login and Registration Form
    • Card Design
    • Loader
  • JavaScript
  • Python
  • Internet
  • Landing Pages
  • Tools
    • Google Drive Direct Download Link Generator
    • Word Count
  • Games
    • House Painter
Notification Show More
Latest News
Responding to and Tracking Key Presses
How to Work With Responding to and Tracking Key Presses
JavaScript
Passing a JavaScript Value Between HTML Pages
Passing a JavaScript Value Between HTML Pages
JavaScript
Compare Objects in an Array
JavaScript Problem: Compare Objects in an Array
JavaScript
Switching Name Order Using Capturing Groups in Regular Expressions
Switching Name Order Using Capturing Groups in Regular Expressions
JavaScript
Shuffling an Array
JavaScript Problem: How to Perform Shuffling an Array
JavaScript
Aa
Aa
rocoderesrocoderes
Search
  • Home
  • HTML & CSS
    • Login and Registration Form
    • Card Design
    • Loader
  • JavaScript
  • Python
  • Internet
  • Landing Pages
  • Tools
    • Google Drive Direct Download Link Generator
    • Word Count
  • Games
    • House Painter
Follow US
High Quality Design Resources for Free.
rocoderes > HTML & CSS > How to Make space animation using css3
HTML & CSS

How to Make space animation using css3

Admin
Last updated: 2022/11/23 at 4:54 AM
Admin
Share
5 Min Read

A few simple animations can make a huge difference. Today we will make space animation using css3. In this article, we’ll learn how we can use animation to bring our content to life. And we’ll create Amazing space animation using css3.

Contents
Let’s create space animation using css31.set the background2.set the Alliance in space animation3.Set the spaceships4.set the Astronaut
space animation using css3

In this example, we are going to create space animation using css3. So first we need some png images like Aliens, astronaut, spaceship. So we can easily animated.

You can find the full demo here.

Let’s create space animation using css3

1.set the background

We give the background image to the body element.

body{
    background: url(./images/bg.jpg) no-repeat fixed;
     background-size: cover;
    overflow: hidden;
}

Here we give the background no-repeat and fixed.and overflow is hidden.

2.set the Alliance in space animation

Now we add our aliens.

 <!--------------------------------Alians start----------------------------------------------->
    <div class="alian-1">
        <img src="./images/alian.png" alt="">
    </div>

    <div class="alian-2">
        <img src="./images/alian.png" alt="">
    </div>

    
    <div class="alian-3">
        <img src="./images/alian.png" alt="">
    </div>
    <!--------------------------------Alians End----------------------------------------------->

We will use 3 aliens here.

here we use position absolute to set the aliens images.code is below

.alian-1,.alian-2,.alian-3{
    position: absolute;
}
.alian-1 {
    top: 77%;
    left: 47%;
    animation: alian1move 3s linear infinite ;
}
.alian-2 {
    top: 65%;
    left: 74%;
    animation: alian2move 3s linear infinite ;
}
.alian-3 {
    top: 74%;
    left: 90%;
    animation: alian3move 3s linear infinite ;
}

Now we give animation to aliens. When aliens animate up and down. We give animation time 3s here.and set the linear and infinite.

/*********************************************Alian1 Animation start***********************************/
@keyframes alian1move{
    0%{
        top:77%;
        left:47%;
    }
    50%{
        top:67%;
        left:47%;
    }
    100%{
        top:77%;
        left:47%;
    }
}
/*********************************************Alian1 Animation End***********************************/

/*********************************************Alian2 Animation start***********************************/
@keyframes alian2move{
    0%{
        top: 65%;
        left: 74%;
    }
    50%{
        top: 55%;
        left: 74%;
    }
    100%{
        top: 65%;
        left: 74%;
    }
}
/*********************************************Alian2 Animation End***********************************/

/*********************************************Alian3 Animation start***********************************/
@keyframes alian3move{
    0%{
        top: 74%;
        left: 90%;
    }
    50%{
        top: 64%;
        left: 90%;
    }
    100%{
        top: 74%;
        left: 90%;
    }
}
/*********************************************Alian3 Animation End***********************************/

3.Set the spaceships

Now we will add 3 spaceships

 <!--------------------------------spaceship start----------------------------------------------->
    <div class="spaceship1">
        <img src="./images/spaceship.png" alt="">
    </div>
    <div class="spaceship2">
        <img src="./images/spaceship.png" alt="">
    </div>
    <div class="spaceship3">
        <img src="./images/spaceship.png" alt="">
    </div>

    <!--------------------------------spaceship End----------------------------------------------->

now we use the position absolute to set the spaceship images to the right side.

.spaceship1,.spaceship2,.spaceship3{
    position: absolute;
}
.spaceship1{
    right:-20%;
    top:10%;
    animation:spaceship1move 100s linear infinite;
}
.spaceship2{
    top:17%;
    right:-20%;
    animation:spaceship1move 200s linear infinite ;
    animation-delay: 5s;
}
.spaceship3{
    right:-20%;
    top:2%;
    animation:spaceship1move 300s linear infinite ;
    animation-delay: 15s;
}

Here Now we give animation to spaceships. When spaceships animate to the right to the left side. We give spaceship1 animation time 100s here.and set the linear and infinite.now we give spaceship2 animation time 200s and set the animation-delay time 5s.now set spaceship3 animation time 300s and set the animation-delay time 15s. Here s means Seconds.

4.set the Astronaut

Now in the last we add Astronaut.

 <!--------------------------------Astronat1  start----------------------------------------------->
    <div class="astronat1">
        <img src="./images/astronaut-1.png" alt="">
    </div>
    <!--------------------------------Astronat1  End----------------------------------------------->



      <!--------------------------------Astronat2  start----------------------------------------------->
      <div class="astronat2">
        <img src="./images/astronaut-2.png" alt="">
    </div>
    <!--------------------------------Astronat2  End----------------------------------------------->

now we use position absolute to set the both Astronaut

/*********************************************Astronat1 css start***********************************/
.astronat1{
    position: absolute;
    left: -15%;
    top:0%;
    animation:astronat1move 50s linear;
}
/*********************************************Astronat1 css End***********************************/
/*********************************************Astronat2 css start***********************************/
.astronat2{
    position: absolute;
    right: 5%;
    top:-50%;
    animation:astronat2move 15s linear;
    animation-delay: 60s;
}
/*********************************************Astronat2 css End***********************************/

Here we will give animation to both astronauts.

/*********************************************Astronat1 Animation start***********************************/
@keyframes astronat1move{
    0%{
        left: -15%;
        top:0%;
    }
    100%{
        left: 108%;
        top:25%;
    }
}
/*********************************************Astronat1 Animation End***********************************/
/*********************************************Astronat2 css start***********************************/
.astronat2{
    position: absolute;
    right: 5%;
    top:-50%;
    animation:astronat2move 15s linear;
    animation-delay: 60s;
}
/*********************************************Astronat2 css End***********************************/

In this article, we’ve learned how to create space animation using css3 and made sure our animation is smooth and looks great.

Full source code:

https://github.com/patelrohan750/html_css_javascript_projects/tree/master/space%20animation%20using%20css3

Related

Subscribe to Our Newsletter

Subscribe to our newsletter to get our newest articles instantly!

TAGGED: space animation using css3
Share this Article
Facebook Twitter Email Print
What do you think?
Love0
Sad0
Happy0
Sleepy0
Angry0
Dead0
Wink0
Posted by Admin
Follow:
Rocoderes is a blog you can learn HTML, CSS, JavaScript, React Js and Python along with creative coding stuff and free source code files.
Previous Article What is Linear search in python?
Next Article To-Do List using JavaScript How to Make To-Do List using JavaScript
Leave a comment Leave a comment

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

- Advertisement -

You Might Also Like

Price Range Slider

How to Make Price Range Slider Using JavaScript

December 8, 2022
save text as File in HTML

How to Save Text as File in JavaScript

December 5, 2022
Calendar in HTML

How to Make Dynamic Calendar in HTML & JavaScript

December 5, 2022
instagram signup form

How to Make Instagram Signup Page In HTML and CSS

December 5, 2022
rocoderesrocoderes
Follow US

Copyright © 2022 All Right Reserved By Rocoderes

  • Home
  • About us
  • Contact us
  • Disclaimer
Join Us!

Subscribe to our newsletter and never miss our latest news, podcasts etc.

Zero spam, Unsubscribe at any time.
Welcome Back!

Sign in to your account

Lost your password?