Create Your First CSS Animation in 5 Steps

In this instructable, you will learn how to create a floating animation that you can add to any website in 5 simple steps! This can be used as a page loading indicator or a subtle animation to catch someones attention to a specific part of the page.

WARNING

If you are not familiar with HTML or CSS, this may look like gibberish. Please refer to these Instructables to understand the basics:

• The Basics of HTML and CSS by LiveCrafts

• Web Designing Basics (HTML and CSS) by vishalapr

• HTML and CSS for Beginners by Vishwas Adiga

Step 1: Find an Image or Icon You'd Like to See Floating

This can be any image really, but for this example, I will be using a ghost.

Step 2: Add HTML and Make Sure to Use Specific Tags (i.e. Div Class="float")

You can either type the HTML code above or just copy the code below:

## HTML CODE

<div class="wrapper">

     <div class="float">

          <img src="http://image-source.png" width="180" />

     </div>

</div>

## END OF HTML CODE

Step 3: Add CSS to Style Image and Text

This is just the starter CSS/styling needed for layout, alignment, and typography. We will be animating the ghost in the next step!

## CSS CODE

* {

   margin: 0;

   padding: 0;

}

/* ALIGN EVERYTHING IN THE BODY TO THE CENTER */

body {

   font-family: Creepster;

   position:relative;

   height: 100vh;

   text-align: center;

   font-size: 46px;

}

.wrapper {

   position: absoluate;

   top: 50%;

   left: 50%;

   transform: translate(-50%, -50%);

}

## END OF CSS CODE

Step 4: Add CSS3 Needed for Animation

See It Live - https://codepen.io/zeinab92/full/RQGQPG/

## CSS ANIMATION CODE

/* THIS ALLOWS IMAGE TO GO UP AND DOWN AT SPECIFIC KEYFRAMES */
/* MAKING IT LOOK LIKE ITS FLOATING */

@keyframes floating {

   0% { transform: translate3d(0, 0, 0); }

   45% { transform: translate3d(0, -25%, 0); }

   55% { transform: translate3d(0, -25%, 0); }

   100% { transform: translate3d(0, 0, 0); }

}

/* THIS IS WHERE YOU COMBINE THE "FLOAT" CLASS (STEP 2 REFERENCE) */
/* WITH THE KEYFRAME ANIMATION ABOVE */

.float {

   animation: floating 2s ease-in-out infinite;

}

## END OF CSS ANIMATION CODE

Step 5: Adjust Height or Speed of Floating Animation

We can increase how high or fast the animation floats by editing the CSS.

Step 6: Another Example Using "Float" Animation

This is commonly used in websites to subtly show the visitor that there may be more content below the fold, for example.