Create Your First CSS Animation in 5 Steps

by zainab92

1.1K21

Intro: 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.

Comments