HTML & CSS Trying to do animation on a single webpage using Firefox

[iainnitro]

Greetings all:

I have been developing webpages for a few years but out of practice quite a bit. Now doing a bit of Development and running a YouTube channel. I want to create a single webpage for closing credits that will use CSS3 to scroll the text upwards (movie end credit style). I am attaching my HTML file as I currently is and need a bit more than most online tutorials seem to cover and at least 3 YouTube videos on the subject as my animation does not happen in Firefox. I am not understanding something so if anyone can give me a clue, it will be appreciated. Have spent a few days and three hours coding the file which is attached to try and get this single animation to work. Please advise on what ever it is I am not getting here and thanks in advance!

This is for my own YouTube channel and will be used for my own end credits.

Thanks,
Michael

<Style>
body{
  /* General Page attributes */
  background:#000;
  font-family: 'Orbitron', sans-serif;
  text-transform:uppercase;
  text-align:center;
  margin:0;
  padding:0;
}
.container {
  white-space: nowrap;
  overflow: hidden;
}
.container div {
  animation: anim 100s linear infinite;
}
h1 {color: purple;}
p {color: teal;}

@keyframes anim {
  0% {
     transform: translate(0,0);
  }
  100% {
     transform: translate(0,-100);
  }
}
</style>

the actual body:

<div class="container">
    <h1>Basic Setup test</h1>
    <p>lorum ipsum etc.</p>
    <p>lorum ipsum</p>
    <p>lorum ipsum reductum</p>
    <p> more stuff and things </p>
    <p><img src="Digital-Patreon-Logo_FieryCoral.png" height=100 width=100/></p>
    <p><img src="logo-color.png"/></p>
  </div>

this is all in one file so the style is in the head.

 

[Johna]

Greetings @iainnitro,
I think this should be the reason why it's not working.

.container div {
  animation: anim 100s linear infinite;
}

In this part the code is looking for a div element inside the div with the container class, which in your html doesn't exist.

What you should do instead is put the animation: anim 100s linear infinite; in you .container{} styling.

my animation does not happen in Firefox.

You're saying is doesn't work in firefox, does that mean it works in chrome?

 

[iainnitro]

Hello there: Did move the statement to the .container still no animation on either Chromium or Firefox. Again do I need another DIV or something in this page to get this to work. Also added another @-moz-keyframe statement to try to cover Firefox but no change.

Thanks.

Michael

 

[Johna]

Maybe try adding px like this:

@keyframes anim {
  0% {
     transform: translate(0px,0px);
  }
  100% {
     transform: translate(0px,-100px);
  }
}

Again do I need another DIV or something in this page to get this to work.

I don't think so...

 

[iainnitro]

@Johna Hello and thanks. Your suggestion solved the problem. Now to the business of making it go live instead of a mockup