Slider doesn't start - CSS only

I create a slider with some logos, but the animation doesn't start. I create it with only css but it remains blocked. I check few time the code but I can find the answer. The slider should scroll and change the logo, but it doesn't work.

I think that it could be also created with javascript but I'm not sure how to do it.

Can someone help me?

.slider {
  width: 960px;
  height: 100px;
  overflow: hidden;
  position: relative;
  margin: auto;
}

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

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

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

.slider .slide img {
  width: 200px;
  height: 100px;
}

.slider .slider-track {
  display: flex;
  width: calc(200px * 20);
  animation: scroll 4s ease 3s infinite linear;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-200px * 10));
  }
}
<div class="slider">
  <div class="slider-track">
    <div class="slide">
      <img src="./1.png">
    </div>
    <div class="slide">
      <img src="./2.png">
    </div>
    <div class="slide">
      <img src="./3.png">
    </div>
    <div class="slide">
      <img src="./4.png">
    </div>
    <div class="slide">
      <img src="./5.png">
    </div>
    <div class="slide">
      <img src="./6.png">
    </div>
    <div class="slide">
      <img src="./7.png">
    </div>
    <div class="slide">
      <img src="./8.png">
    </div>
    <div class="slide">
      <img src="./9.png">
    </div>
    <div class="slide">
      <img src="./10.png">
    </div>
  </div>
</div>

1 answer

  • answered 2021-11-25 13:30 Stanley

    Your animation property is wrong.

    use these properties instead. This is more readable and it makes it easier to avoid similar mistakes:

    animation-name
    animation-duration
    animation-timing-function
    animation-delay
    animation-iteration-count
    animation-direction
    animation-fill-mode
    animation-play-state
    

    https://www.w3schools.com/cssref/css3_pr_animation.asp

    .slider {
      width: 960px;
      height: 100px;
      overflow: hidden;
      position: relative;
      margin: auto;
    }
    
    .slider::before,
    .slider::after {
      content: "";
      position: absolute;
      width: 200px;
      height: 100px;
      background: linear-gradient(to right, width 0%, rgba(255, 255, 255, 0) 100%);
      z-index: 2;
    }
    
    .slider::before {
      top: 0;
      left: 0;
    }
    
    .slider::after {
      top: 0;
      right: 0;
      transform: rotateZ(180deg);
    }
    
    .slider .slide img {
      width: 200px;
      height: 100px;
    }
    
    .slider .slider-track {
      display: flex;
      width: calc(200px * 20);
      animation: scrolll 4s ease;
    }
    
    @keyframes scrolll {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(calc(-200px * 10));
      }
    }
    <div class="slider">
      <div class="slider-track">
        <div class="slide">
          <img src="./1.png">
        </div>
        <div class="slide">
          <img src="./2.png">
        </div>
        <div class="slide">
          <img src="./3.png">
        </div>
        <div class="slide">
          <img src="./4.png">
        </div>
        <div class="slide">
          <img src="./5.png">
        </div>
        <div class="slide">
          <img src="./6.png">
        </div>
        <div class="slide">
          <img src="./7.png">
        </div>
        <div class="slide">
          <img src="./8.png">
        </div>
        <div class="slide">
          <img src="./9.png">
        </div>
        <div class="slide">
          <img src="./10.png">
        </div>
      </div>
    </div>

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum