Having issues with upward scrolling of text in Firefox using CSS3-CodePudding

I have been trying to get a simple upward scroll of text (like movie credits) to work using just HTML and CSS3. My animation does not work and I am using Firefox on Linux. The plan is to use a single webpage (see pasted code) and run this as a browser source for my YouTube channel. I understand the basics, but for some reason I cannot get this single animation to work to save my collective self :-) Hopefully someone can look at my code and tell me what it is I am missing here. All the examples seem to be close, but not what I am after and I am still noob enough at CSS to be lost. The code is:

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);
  }
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div >
    <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>
</body>
</html>

Thanks in advance for any clue here. Michael

CodePudding user response：

.container div selects a div inside class container.

It is not targeting any element in your html as there is no div inside container class.

Perhaps you mean,

.container p

CodePudding user response：

There seem to be a couple of problems.

.container div

is trying to target a div which is a descendant of the element with class container, but there is no such div. I think you want to move the whole container upwards.

The translate in the y direction in the keyframes has -100 with no units so isn't doing anything. Give it -100% which means move it upwards by its full height.

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 {
  animation: anim 100s linear infinite;
}

h1 {
  color: purple;
}

p {
  color: teal;
}

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

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div >
    <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>
</body>

</html>