CSS transition has a delay before restarting the animation

Question

I don't know where I am going wrong on this one but in normal HTML + CSS this code works fine however now I am moving over to react the animation has a delay before restarting itself again.

I want the animation to scroll infinitely but it stops at the end and then restarts.

HTML CODE

    <div className="carousel">
      <div className="slider">
        <div className="slide_track">
          <div className="slide">
            <div className="slide_img">slide 1</div>
          </div>
          <div className="slide">
            <div className="slide_img">slide 2</div>
          </div>
          <div className="slide">
            <div className="slide_img">slide 3</div>
          </div>
          <div className="slide">
            <div className="slide_img">slide 4</div>
          </div>
          <div className="slide">
            <div className="slide_img">slide 5</div>
          </div>
          <div className="slide">
            <div className="slide_img">slide 6</div>
          </div>
          <div className="slide">
            <div className="slide_img">slide 7</div>
          </div>
        </div>
      </div>
    </div>

CSS

.slider {
  box-shadow: none;
  height: 100px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: auto;
  background-color: lightcoral;
  max-width: 1600px;
}

.slider::before,
.slider::after {
  background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 100px;
  position: absolute;
  width: 200px;
  z-index: 2;
}

.slide_img {
  background-color: navy;
  color: #fff;
}

.slider::after {
  right: 0;
  top: 0;
  -webkit-transform: rotateZ(180deg);
  transform: rotateZ(180deg);
}

.slider::before {
  left: 0;
  top: 0;
}

.slider .slide_track {
  animation-name: scroll;
  -webkit-animation-name: scroll;
  animation-duration: 40s;
  -webkit-animation-duration: 40s;
  animation-delay: 0;
  -webkit-animation-delay: 0;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  display: flex;
  width: calc(250px * 7);
}

.slider .slide {
  height: 100px;
  width: 250px;
}

@media screen and (max-width: 992px) {
  .slider {
    width: 100%;
  }
}

@-webkit-keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(calc(-250px * 5));
    transform: translateX(calc(-250px * 5));
  }
}

@keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(calc(-250px * 7));
    transform: translateX(calc(-250px * 7));
  }
}

I have tried the shorthand code like this

  -webkit-animation: scroll 40s linear infinite;
  animation: scroll 40s linear infinite;

and also the long

  animation-name: scroll;
  -webkit-animation-name: scroll;
  animation-duration: 40s;
  -webkit-animation-duration: 40s;
  animation-delay: 0;
  -webkit-animation-delay: 0;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;

I have made a code and sandbox for this so you can have a look yourself.

really stumped on this and hope someone can help as it seems like a simple fix :)

Codeandsandbox

Please include all relevant code to provide a [minimal reproducible sample](https://stackoverflow.com/help/minimal-reproducible-example) — Kameron, Dec 15 '21 at 17:11

score 0 · Answer 1 · answered Dec 15 '21 at 18:18

0

That's related to the way the animation renders.

This may solve the issue, my recommendation is to play with it and see if that works for you.

@keyframes scroll {
  0% {
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
  }
}

The initial value will make the element outside of the window, and nobody will notice the reset

answered Dec 15 '21 at 18:18

David Salomon

804
1
7
24

I tested your code in the codeandsandbox link and it does not work. It still leaves a massive gap as you can see the blue is not connected – Matt Dec 15 '21 at 18:27
I think it's related to the width of the elements and with the width of the slider, there's an answer about it on https://stackoverflow.com/questions/30032646/smooth-infinite-scrolling-banner-css-only – David Salomon Dec 15 '21 at 19:06

CSS transition has a delay before restarting the animation

1 Answers1