How to use CSS animations to scroll through keyframes-CodePudding

I am trying to create an image gallery which has an auto-play feature. Due to my lack of experience in this area, I have resorted to YouTube tutorials, and followed this one step be step: https://www.youtube.com/watch?v=3Z780EOzIQs

Everything works so far apart from the actual scrolling function.

I did some research and found that adding -webkit- could help, but it did not change anything. I also tried moving the code in and out of different parts of my HTML (since I wanted it to be within a card sourced from https://bootswatch.com/cyborg/, i thought it may be interfering with the scrolling animation). This also didnt work, so I was hoping someone could point me in the right direction.

Here is the code from the video, which I have copied, except for the 'shadows', since I was trying to fix the scroll function before i move onto that part. I also noticed that the 'image hover' feature does not work... my last solution to this may be that the images are sourced from the web, but I dont see why that would be an issue...

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.slider {
  height: 300px;
  margin: auto;
  position: relative;
  width: 90%;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.slide-track {
  display: flex;
  width: calc(250px * 18);
  -webkit-animation-animation: scroll 40% linear infinite; // Here's what I thought COULD work based on someone else's question, but I'm not sure if this is correct.
}

@keyframes scroll {
  // scrolling funtion
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 9));
  }
}

.slide {
  height: 200px;
  width: 250px;
  display: flex;
  align-items: center;
  padding: 15px;
  perspective: 100px;
}

img {
  width: 100%;
  transition: transform 1%;
}

img.hover {
  transform: translateX(20px);
  transform: translateY(20px);
}

<div  style="padding-top: 100px; padding-bottom: 30px;">
  <div >
    <div >
      <img src="https://www.makerbot.com/wp-content/uploads/2018/08/MakerBot-Replicator-Mini-Product-Image.png" />
    </div>
    <div >
      <img src="https://m.media-amazon.com/images/I/61Jg1UeOkKL._SX522_.jpg" />
    </div>
    <div >
      <img src="https://www.makerbot.com/wp-content/uploads/2018/08/MakerBot-Replicator-Mini-Product-Image.png" />
    </div>
    <div >
      <img src="https://m.media-amazon.com/images/I/61Jg1UeOkKL._SX522_.jpg" />
    </div>
    <div >
      <img src="https://www.makerbot.com/wp-content/uploads/2018/08/MakerBot-Replicator-Mini-Product-Image.png" />
    </div>
    <div >
      <img src="https://m.media-amazon.com/images/I/61Jg1UeOkKL._SX522_.jpg" />
    </div>
    <div >
      <img src="https://www.makerbot.com/wp-content/uploads/2018/08/MakerBot-Replicator-Mini-Product-Image.png" />
    </div>
    <div >
      <img src="https://m.media-amazon.com/images/I/61Jg1UeOkKL._SX522_.jpg" />
    </div>
    <div >
      <img src="https://www.makerbot.com/wp-content/uploads/2018/08/MakerBot-Replicator-Mini-Product-Image.png" />
    </div>



    <div >
      <img src="https://www.makerbot.com/wp-content/uploads/2018/08/MakerBot-Replicator-Mini-Product-Image.png" />
    </div>
    <div >
      <img src="https://m.media-amazon.com/images/I/61Jg1UeOkKL._SX522_.jpg" />
    </div>
    <div >
      <img src="https://www.makerbot.com/wp-content/uploads/2018/08/MakerBot-Replicator-Mini-Product-Image.png" />
    </div>
    <div >
      <img src="https://m.media-amazon.com/images/I/61Jg1UeOkKL._SX522_.jpg" />
    </div>
    <div >
      <img src="https://www.makerbot.com/wp-content/uploads/2018/08/MakerBot-Replicator-Mini-Product-Image.png" />
    </div>
    <div >
      <img src="https://m.media-amazon.com/images/I/61Jg1UeOkKL._SX522_.jpg" />
    </div>
    <div >
      <img src="https://www.makerbot.com/wp-content/uploads/2018/08/MakerBot-Replicator-Mini-Product-Image.png" />
    </div>
    <div >
      <img src="https://m.media-amazon.com/images/I/61Jg1UeOkKL._SX522_.jpg" />
    </div>
    <div >
      <img src="https://www.makerbot.com/wp-content/uploads/2018/08/MakerBot-Replicator-Mini-Product-Image.png" />
    </div>
  </div>
</div>

CodePudding user response：

You had a couple of small errors on your code.

I have changed scroll 40% linear infinite; into scroll 40s linear infinite; (to use seconds instead of %)
i have removed the strange -webkit rules you had (-webkit-animation-animation isn't a valid css rule, it should be -webkit-animation) and run the css through an autoprefixer (https://autoprefixer.github.io/)

Here is an example:

body {
  min-height: 100vh;
  display: -ms-grid;
  display: grid;
  place-items: center;
}

.slider {
  height: 300px;
  margin: auto;
  position: relative;
  width: 90%;
  display: -ms-grid;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.slide-track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: calc(250px * 18);
  -webkit-animation: scroll 40s linear infinite;
  animation: scroll 40s linear infinite;
}

@-webkit-keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(calc(-250px * 9));
    transform: translateX(calc(-250px * 9));
  }
}

@keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(calc(-250px * 9));
    transform: translateX(calc(-250px * 9));
  }
}

.slide {
  height: 200px;
  width: 250px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 15px;
  -webkit-perspective: 100px;
  perspective: 100px;
}

img {
  width: 100%;
  -webkit-transition: -webkit-transform 1%;
  transition: -webkit-transform 1%;
  transition: transform 1%;
  transition: transform 1%, -webkit-transform 1%;
}

img.hover {
  -webkit-transform: translateX(20px);
  transform: translateX(20px);
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
}

<div  style="padding-top: 100px; padding-bottom: 30px;">
  <div >
    <div >
      <img src="https://www.makerbot.com/wp-content/uploads/2018/08/MakerBot-Replicator-Mini-Product-Image.png" />
    </div>
    <div >
      <img src="https://m.media-amazon.com/images/I/61Jg1UeOkKL._SX522_.jpg" />
    </div>
    <div >
      <img src="https://www.makerbot.com/wp-content/uploads/2018/08/MakerBot-Replicator-Mini-Product-Image.png" />
    </div>
    <div >
      <img src="https://m.media-amazon.com/images/I/61Jg1UeOkKL._SX522_.jpg" />
    </div>
    <div >
      <img src="https://www.makerbot.com/wp-content/uploads/2018/08/MakerBot-Replicator-Mini-Product-Image.png" />
    </div>
    <div >
      <img src="https://m.media-amazon.com/images/I/61Jg1UeOkKL._SX522_.jpg" />
    </div>
    <div >
      <img src="https://www.makerbot.com/wp-content/uploads/2018/08/MakerBot-Replicator-Mini-Product-Image.png" />
    </div>
    <div >
      <img src="https://m.media-amazon.com/images/I/61Jg1UeOkKL._SX522_.jpg" />
    </div>
    <div >
      <img src="https://www.makerbot.com/wp-content/uploads/2018/08/MakerBot-Replicator-Mini-Product-Image.png" />
    </div>



    <div >
      <img src="https://www.makerbot.com/wp-content/uploads/2018/08/MakerBot-Replicator-Mini-Product-Image.png" />
    </div>
    <div >
      <img src="https://m.media-amazon.com/images/I/61Jg1UeOkKL._SX522_.jpg" />
    </div>
    <div >
      <img src="https://www.makerbot.com/wp-content/uploads/2018/08/MakerBot-Replicator-Mini-Product-Image.png" />
    </div>
    <div >
      <img src="https://m.media-amazon.com/images/I/61Jg1UeOkKL._SX522_.jpg" />
    </div>
    <div >
      <img src="https://www.makerbot.com/wp-content/uploads/2018/08/MakerBot-Replicator-Mini-Product-Image.png" />
    </div>
    <div >
      <img src="https://m.media-amazon.com/images/I/61Jg1UeOkKL._SX522_.jpg" />
    </div>
    <div >
      <img src="https://www.makerbot.com/wp-content/uploads/2018/08/MakerBot-Replicator-Mini-Product-Image.png" />
    </div>
    <div >
      <img src="https://m.media-amazon.com/images/I/61Jg1UeOkKL._SX522_.jpg" />
    </div>
    <div >
      <img src="https://www.makerbot.com/wp-content/uploads/2018/08/MakerBot-Replicator-Mini-Product-Image.png" />
    </div>
  </div>
</div>