Tickertape HTML/CSS

[crwbr]

I'm having some trouble adding some code for a tickertape banner at the bottom of my company's webpage. I've put the code in Codepen.io and I have no issues there, but for some reason once I input it into the theme page ( both as header/footer html and main.less ) it no longer is functional.

Note: My company uses Weebly through IDEXX Laboratories, though I'm not sure why this would cause the issue.

Here is the HTML code:

<div id="banner-footer">
		<div class="ttc">
			<div class="ttitem">"An animal's eyes have the power to speak a great language." - Martin Buber</div>
      <div class="ttitem">"Until one has loved an animal, a part of one's soul remains unawakened." - Anatole France</div>
       <div class="ttitem">"Animals are such agreeable friends - they ask no questions, they pass no criticisms." - George Eliot</div>
       <div class="ttitem">"Some people talk to animals. Not many listen, though. That's the problem." - A. A. Milne</div>
       <div class="ttitem"> "Time spent with cats is never wasted." - Sigmund Freud</div>
       <div class="ttitem"> "I think I could turn and live with animals; they are so placid and self-contained, I stand and look at them long and long." - Walt Whitman</div>
      <div class="ttitem"> "Sometimes the smallest things take up the most room in your heart." - Winnie the Pooh</div>
			  </div>
		</div>

And here is the CSS code:

/*text banner footer*/

#banner-footer {
  overflow: hidden;
	background-color: #40797c;
}

#banner-footer .ttc {
  display: flex;
	max-width: 1000px;
	max-height: 50px;
	margin: 10px auto;
	padding: 0.50em;
	box-sizing: border-box;
}

#banner-footer .ttc .ttitem {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
	color: #fff;
	font-family: "Roboto";
	font-size: 1.0em;
	font-weight: 50;
	letter-spacing: 0.05em;
	margin: 0 auto 0em;
	text-align: center;
}

@keyframes tickerh {
  0% { transform: translate3d(100%, 0, 0); }
  100% { transform: translate3d(-700%, 0, 0); }
  
}
.ttc {
  animation: tickerh linear 0s infinite;
  animation-duration: 90s
}
.ttc:hover {
  animation-play-state: paused;
}

Any help is appreciated - thank you!

[PaulMathews · Accepted solution]

@crwbr Animation css doesn't work when added to the main.less css. Remove the animation css and, instead, place it in the header code of the page(s) where you're implementing the crawler. Remember to wrap the animation css with style tags. You can implement the animation css within a specific page (Pages > SEO Settings > Header Code) or globally (Settings > SEO > Header Code). The non-animation css for the crawler can remain in the main.less file.

[crwbr]

Worked perfectly - Thanks so much!