How I make my profile do the up and down animation?

this part makes it bob up and down:

<style>

h1{

  animation: type 3s steps(27);

  color: white;

  font-size: 10px;

  font-family: courier;

  white-space: nowrap;

  overflow: hidden;

  }

@keyframes type{

  0%{

    width:0ch;

  }

  100%{

    width:27ch;

  }

}

@keyframes blink{

  0%{opacity:1;}

  50%{opacity:0;}

  100%{opacity:1;}

}

.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

@keyframes float {

0% { transform: translate(0, 0px);

}

50% {

transform: translate(0, 8px);

}

100% {

transform: translate(0, -0px);

}

</style>

while this part makes the stuff shake when you hover over it:

<style>

img:hover , .url-info:hover , .online:hover {

  animation: shake 1s;

  animation-iteration-count: infinite;

}

@keyframes shake {

  0% { transform: translate(1px, 1px) rotate(0deg); }

  10% { transform: translate(-1px, -2px) rotate(-1deg); }

  20% { transform: translate(-3px, 0px) rotate(1deg); }

  30% { transform: translate(3px, 2px) rotate(0deg); }

  40% { transform: translate(1px, -1px) rotate(1deg); }

  50% { transform: translate(-1px, 2px) rotate(-1deg); }

  60% { transform: translate(-3px, 1px) rotate(0deg); }

  70% { transform: translate(3px, 1px) rotate(-1deg); }

  80% { transform: translate(-1px, -1px) rotate(1deg); }

  90% { transform: translate(1px, 2px) rotate(0deg); }

  100% { transform: translate(1px, -2px) rotate(-1deg); }

}

</style>

sorry if I left anything out lmao, I'm also super confused since I only started looking into css today 

ILY/P

Thank you so much!!!

TYSMMMM >_<

TYYYY

THANK YOU SO MUCH FOR THIS POST OMG

THXXX!!

Tysssmmmm!

but theres something wrong with my page when i did that my gifs were all missed placed so how do i fix that lol

Tysssmmmm!

but theres something wrong with my page when i did that my gifs were all missed placed so how do i fix that lol

Thanks :33

And so that my loading screen and the VHS filter are not clipped when moving down and up? Do you have a solution?

OMG TYSMMM!!<33

LIFE SAVER TYSM

the first code above broke my profile ;-;

i tried to use this, but it then moved my floating images to the middle? help?

(edited, the gifs go in the containers but i think the gifs/images that fall down on ur screen won't fall on one side now)

<style>

main, footer, nav::before, .online, nav .links, nav .top {

    animation: float 3s;

    animation-iteration-count: infinite;

    animation-timing-function: ease-in-out;

}

@keyframes float {

    0% {

        transform: translate(0, 0px);

    }

    50% {

        transform: translate(0, 8px);

    }

    100% {

        transform: translate(0, -0px);

    }

}

</style>

To create the up-and-down animation and hover shake effect on your profile, you can use CSS animations and transitions. For the up-and-down movement, apply a @keyframes animation with a translateY property to move the element up and down. For the hover shake effect, use the :hover pseudo-class with a @keyframes animation or CSS transform for a slight shake (e.g., translateX or translateY). Here's a basic example:

@keyframes moveUpDown {

  0%, 100% { transform: translateY(0); }

  50% { transform: translateY(-10px); }

}

.profile {

  animation: moveUpDown 2s infinite;

}

.profile:hover {

  animation: shake 0.5s ease-in-out;

}

@keyframes shake {

  0% { transform: translateX(0); }

  25% { transform: translateX(-5px); }

  50% { transform: translateX(5px); }

  75% { transform: translateX(-5px); }

  100% { transform: translateX(0); }

}

This will animate your profile and apply a shake effect when hovered. Adjust the timing and distance values to fit your design.