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

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

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

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

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

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

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