Floating Profile Animation

Tags: float, floating, animation, floating animation

Description:

i nearly drove myself crazy trying to figure out how to make things float so i figured i'd help other people out by posting it here (and if here isn't the right place for it, sorry!)

you'll take whats posted in the layout code section and put it at the very bottom of your style code, right above the last /style is, and anywhere you want something to float you'll toss in "animation: floating 3s ease-in-out infinite"

if you want the whole profile to float you'll put it where the main section is, so for example from my profile code it would look like this!:

main {
background-color: #F79BB7;
color: white;
animation: floating 3s ease-in-out infinite
}

play around with where you put it to see what you can make float, and have fun! [EDIT] i didn't realize until now it deleted part of my tutorial, im so sorry! i've just fixed it and, since im here, i'll plug this link here https://nein-mc.neocities.org/csstest/ for coding your profile in real time, it helps with playing around!

Code:

<!-- (c) Layout created by remy (https://layouts.spacehey.com/layout?id=27197) -->

.floating { 
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 5px;
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }
}

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 69 comments ( View all | Add Comment )

galacticrowan	1747669483 using! thank you dude you're a life saver ^^ Report Comment
abbe	1747517117 so cool!!! usingg Report Comment
Ry4n_Gl1tch	1747086334 This was super useful, thanks!! >:D Report Comment
₊‧°𐐪꩜🦇Mr.Joy🍓꩜𐑂°‧₊	1746845218 using Report Comment
asezurts	1746794938 using Report Comment
「 ✦ ＪＵＮＥ！✦ 」	1744718018 using :B Report Comment
hikiko 💌	1744194366 using!! Report Comment
─ ⋮ 𝑳𝒆𝒙𝒊𝒂𝒐 ᝰ.ᐟ	1744043077 using TYSM ‼️ Report Comment
𝖛𝖆𝖓𝖊𝖑𝖞	1743885877 THANK YOU YOU SAINT PERSON!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! using btw )) Report Comment hii, i wanted to ask how did u get the pngs to stay on the sides? by toficita; 1745092987; Report
Uncreatice	1741887697 AAA Using this!!! I'm so glad I found this!!⸜(｡˃ ᵕ ˂ )⸝♡ Report Comment
mei	1741509904 using ! Report Comment
sauflett	1741079654 ussinggg Report Comment
Askel	1741022198 Can someone provide the whole code needed for the floating profile?? XP Report Comment
🌸 .	1740299344 how do you get the whole profile to float?? im so confused :( Report Comment si te responden hablame plis by 東京; 1747008524; Report
VAL!!𖣂⋆	1740234702 usingg Report Comment
*: ･ﾟangelofmusic17	1739908500 using, tysm! Report Comment
Kiani Wolf	1739813367 Using Report Comment
vivi	1739584775 using :) Report Comment
spawn	1738288604 using !! Report Comment
leah ᥫ᭡	1738270321 USINGGGG Report Comment