« Web, HTML, Tech Forum

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

Posted by aeron ☆

posted

Forum: Web, HTML, Tech

There's an mcr layout that makes the profile go up and down, and also when you hover some things it shakes. Anyone know how to do these things? D;

I'm too smooth-brained to be able to isolate and figure how to do it n put it on my profile;-;


Report Topic

16 Replies

Sort Replies:

Reply by sutvre

posted

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 


Permalink Report Reply

Reply by Tabris☤

posted

Reply by Insydious

posted

Thank you so much!!!


Permalink Report Reply

Reply by orang/Hal

posted

Reply by cooked

posted

Reply by SourceCodeSerenader

posted

THANK YOU SO MUCH FOR THIS POST OMG


Permalink Report Reply

Reply by Mafu (°ロ°) !!

posted

Reply by ♱shewillrot♱

posted

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


Permalink Report Reply

Reply by ♱shewillrot♱

posted

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


Permalink Report Reply

Reply by ⟡Ziggy

posted

Reply by Ruwsiann

posted

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


Permalink Report Reply

Reply by 丰 punkyylilcat

posted

Reply by Sam

posted

Reply by Suparabbit (NYAPPY NYAPPY NYAPPY) o(≧∀≦)o☆⋆。𖦹°‧★

posted
updated

the first code above broke my profile ;-;


Permalink Report Reply

Reply by mari

posted

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


Permalink Report Reply

Reply by sears

posted
updated

(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>



Permalink Report Reply