CSS Carousel won't work when transferring from React to Hubspot

[fordburgess]

Hello, I'd like to have module that is an autoplaying carousel with all the logos of my company's clients that I can use in multiple different places on our site. I have used this exact code with styled components in a React application for another one of our websites, and it works perfectly. However, it does not work when I test it in the Design Manager Preview. Here is the CSS in question:

  @keyframes slide {
  0% { transform: translateX(0); };
  100% { transform: translateX(calc(-250px * 7)); }
}
.slideContainer {
  height: 150px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100vw;
}
.slideContainer::before, .slideContainer::after {
    content: "";
    height: 150px;
    position: absolute;
    width: 20%;
    z-index: 2;
    background: linear-gradient(to right,  rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}
.slideContainer::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.slideContainer::before {
  top: 0;
  left: 0;
}
.slider {
  animation-name: slide;
  animation-duration: 30s;
  animation-iteration-count: linear infinite;
  display: flex;
  width: calc(250px * 14); 
}
.logo {
  height: 160px;
  width: 160px;
  margin: 0 30px 0 30px;
  background-color: pink;
}

And here is the HTML in question: 

<link href="module.css" rel="stylesheet">
<div class="slideContainer">
  <div class="slider">
    <div class="logo"></div>
    <div class="logo"></div>
    <div class="logo"></div>
    <div class="logo"></div>
    <div class="logo"></div>
    <div class="logo"></div>
    <div class="logo"></div>
    <div class="logo"></div>
    <div class="logo"></div>
    <div class="logo"></div>
    <div class="logo"></div>
    <div class="logo"></div>
    <div class="logo"></div>
    <div class="logo"></div>
  </div>
</div>

 I wish I could report that I've tried many solutions, but I don't really know what to do since this works perfectly on my other site. The only difference between my code on Hubspot and the other site is that I added the animation duration and iteration properties, instead of just having those under the animation property. Thanks in advance for your help.

[alyssamwilie]

There's an errant colon in the middle of your keyframe, after the 0% end bracket. Remove that and it should work.

Also "linear infinite" is not a valid property value for animation-iteration-count. Should be:

animation-iteration-count: infinite;
animation-timing-function: linear;

[fordburgess · Accepted solution]

Hi @alyssamwilie, thank you for the response. What you have suggested are good practices for maintaining clean code, but what made this work for me, strangely enough, was deleting the "0% { transform: translateX(0) };" property from my keyframes animation. I don't know why this worked, but the errant commas "linear infinite" property do not seem to have affected the animation, as they are still there, but do I appreciate you and @BarryGrennan taking the time to respond.

[alyssamwilie]

The errant semi colon I was talking about was the one at the end of "0% { transform: translateX(0) };" so, yes, I suppose deleting the whole line will also do the trick. The iteration count was a separate thing unrelated to the semi colon.

[BarryGrennan]

I imagine you're missing something (probalby from the css?). It doesn't seem to work in this jsfiddle either

---

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn