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 93 comments ( View all | Add Comment )

ℜ𝔞𝔫𝔡𝔞𝔩𝔩	1770024931 Using Report Comment
(⁠◠⁠‿⁠・⁠)⁠—⁠☆	1769035708 Using! Report Comment
[ ♯ 𝔸𝕞𝕪 ʚɞ 🍕⭐⋆.˚]	1767572864 using!! Report Comment how did you do the thing on your profile where you hover over images and it comes up with a box? thats so cool! by ashton; 1767780125; Report i think it's the hoverbox gallery layout! by monsterlasagna; 1768242858; Report thank you :) by ashton; 1768310864; Report
the silly girl descendents was talking about	1763952847 using :-p Report Comment
ishyyy	1763552726 using !! Report Comment
Asylis	1761594487 using thx I like it so much ^ Report Comment
★míoda★	1761071696 using <3 Report Comment
tylertism	1760137911 using!! Report Comment
>SONIC☆	1759682365 using! Report Comment
s0uj11t3nd	1758228014 using. <3 Report Comment
ItzAbi	1757862022 using!:33 Report Comment
☆⋆｡ren𖦹:3°‧★	1757177912 Using :3 Report Comment
starriii_	1756299532 gonna try it so uhh using!! Report Comment
esther	1755232613 it works but it's shrinking my profile box a little and it's bothering me :( how to fix? Report Comment
Enaji	1754586688 YOU SAVED MY LIFE THANK YOU (usiiiiiiing !!!) Report Comment
Manteca	1753742228 Using it, thanks!! ^^ Report Comment
fiona	1753414857 using Report Comment
S9!D6R	1753040786 using OMG tysm Report Comment
V1X3NX3	1752923171 i feel really stupid rn but i cant figure out how to get the same effect as you where your entire section floats iykwim Report Comment
𝒮𝒾𝓃𝒻𝓊𝓁𝒮𝓀𝓎♡	1752701866 Jus wondering cuz im kind of new to coding lol can u make a pic of yourself float like in ur profile? I been tryna figure out how to do that might tried this code to see if it’ll work idk how to do the placement tho Report Comment