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

ִֶָ࣪⠀⠀ᶻ 𝗓 𐰁. Nereiid	1731419505 using Report Comment
KayNIN3z	1731163865 Using!! Report Comment
﹒⇆﹒★ . DaNa !﹒ᶻz	1731107745 USING!! Report Comment
skeleton	1729686436 using!! Report Comment
KazuhiraMarius	1729411015 using! Report Comment
ｒｏｓｅｔｈｅｂａｂｙｄｏｌｌ	1728420876 using. <3 Report Comment
SONIC THE HEDGEHOG	1726507341 using Report Comment
❥Fusii☆n	1726437951 using !! :] Report Comment
mikki!! .★.	1726340693 wowzaaaa!!! using!!!! Report Comment
Daka ─✩	1725000438 Thank you so much!! <3 you are an angel TwT Report Comment
saltysoda :3	1721589753 AAH!!! THANK U !!!!! ILVOE YOU THANK YOU THANK YOU THANK YOU !!!!! !!!! ! IM USING THISS !!!!! Report Comment
^w^	1720628660 ussingg omggg Report Comment
kaz ☆	1720512189 Using Report Comment
Vivi! :3	1719910112 Using!! Thank you for this, it's great :D Report Comment
frutigerfeverrr	1718913153 using :33 Report Comment
⛧𝕽𝕺𝖃𝕴𝕰_𝕽𝕬𝕮𝕮𝕺𝕺𝕹⛧	1708913834 Do you think you can add it in my code? I really don't know where I should put it lol Report Comment
⛧°. ⋆𓌹♰𓌺⋆. °⛧	1705729310 everytime i put it- it just show into the abt me section and it doesnt like- work lol.. can u help me¿ comment on my profile so i dont forget to give u my layout :3 Report Comment
Alakay🎸⋆⭒˚｡⋆	1705595846 using. Report Comment
QQ	1704660955 hellooo im sorry to disturb you but i got lost where to put it, i tried putting it around but sadly nothing seem to work ? thank you so much for your time in advance Report Comment