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:

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.

First Time Author Contest 2018

Participated in the
First Time Author Contest 2018

Share

    Recommendations

    • Backyard Contest

      Backyard Contest
    • Stone Concrete and Cement Contest

      Stone Concrete and Cement Contest
    • Games Contest

      Games Contest

    Discussions