Introduction: 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](https://content.instructables.com/FN5/QKYP/JCGK5X89/FN5QKYPJCGK5X89.jpg?auto=webp&frame=1&width=320)
Participated in the
First Time Author Contest 2018