In an effort to learn more, I have decided to teach more. Today's lesson ? How to make an object float up and down in css. In this case, we'll make this cute "window popup" float up and down like shown above. First I'll be showing you the general set up and then getting into the floating css properties. Feel free to skip part one and two if you don't need it.
.resources. -> github -> font used -> more info on css animations
.part one. -> general set up
First, you'll start by creating a folder. You can name it what you'd like but I chose "floating" (as it's inside a css tutorial folder). Then open up VS code and open that folder. Now you'll create two files ! one "index.html" and one "style.css". Perfect !
Here's a step by step of what to do next ☐ Type in html and choose "html boilerplate" -> this will generate a standard html template, mine had some extra comment stuff i just deleted (to be honest) ☐ Look in between the <head> and </head> tags and look for <link rel="stylesheet" href" "> Now add style.css in between the empty " "!
.part two. -> adding your object
I won't be showing you a step by step of this part today. Instead I left plenty of comments within the code that you can use as a guide if you need. We're going to focus on the css animation instead.
You can add your own object if you'd like to, but it isn't necessary. Style it however you'd like. I do recommend having it's position as "absolute" which is css for "i can do whatever i want and you can't stop me". The github has the complete code for you to copy and paste. Here's what is important for this particular example.
^ The window that is holding everything (or your main div for whatever is floating) needs to have the class="floating". Because we will be using that class in our css to make it float! and finally... once you have your object positioned where you want and styled..
This is what will make it float up and down. That's literally it. You may have to watch out for different conflicting things and debug if your project is more complicated. But this is what made my little popup window float ~!
@ keyframes floaty { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } }
.floating { animation: floaty 3s ease-in-out infinite; }
You can change this to a horizontal "float/ease" by using "translateX" instead. And to control how fast it goes, change the "3s" to whatever you'd like. Want it to move higher or lower? fiddle with the "10px" !