Want to put basic animation in HTML and CSS

[beno691]

I have a basic animation which is written in html and css which I would like to include on my page but I am not sure where to add it. I have tried sequentially adding it to all the html pages in the "Headers" section but it has had no effect.

Is there a reason why this would be happening? The code works perfectly off weebly. Does weebly prevent things like this?

Cheers

[Adam7]

Hey @beno691! Which code have you been adding where? Generally speaking, you'll want your CSS to go in the Header Code field, and the HTML to be in an Embed Code element on the page.

[beno691]

Weebly comment

Hey Adam, that's interesting...

The code I'm trying to insert is to make the page display an animation that fills the whole screen before any of the page elements appear (on the landing page)

I put the following code at the top of the main_style.css file:

@keyframes moveText {

  from {left: 100vw;}

  to {left: -250vw;}

}

@keyframes showHide {

  0% {opacity: 0;}

  80% {opacity: 0;}

  100% {opacity: 1;}

}

.mover {

  position: absolute;

  right: 100vw;

  animation-name: moveText;

  animation-duration: 6s;

}

.everythingElse {

  animation-name: showHide;

  animation-duration: 4s;

}

And I put this code into the header.html (in my case no_header.html because I don't use one on my site):

<div class="mover">

      <p class="bigtext">Diq&Bol</p>

    </div>

<div class="everythingelse">

<div id="header”>

I’m guessing if I put code in an embed element it won’t fill the entire screen? Which is what I want.

Any way to do this?

[mm0321]

Hello, Adam!

I am also trying to put a css animated bubbles into my header but it's not working. I don't know exactly where to place the coding so that the bubbles would appear only in the header part. Thanks!

Best,

Shermaine

[Bernadette3]

Hi Shermaine. Can you please post the code and url to your site? Another user may be able to help you out with this.