CSS动画实现图片轮播滚动失效及hover问题求助

滚动动画失效的核心问题及修复 #

你的代码里有两处关键错误导致滚动不工作：

1. 动画属性拼写错误：.slide-track里的-webkit-animation-animation是笔误，正确属性名是animation；同时你用了40%作为时间单位，这是无效的，应该用秒（s）作为单位，比如40s。
2. 缺失前缀兼容与标准动画声明：需要同时添加标准的animation属性，以及兼容webkit内核的-webkit-animation，同时对应的@keyframes也要补上@-webkit-keyframes版本。

hover效果失效的问题及修复 #

hover不工作和网络图片无关，是CSS选择器和语法错误：

1. 伪类选择器错误：你写的img.hover是匹配带hover类的图片，而鼠标悬停的伪类是:hover，应该写成img:hover。
2. transform属性覆盖：分开写两个transform会导致后者覆盖前者，需要合并成一个声明。
3. 过渡时间单位错误：transition: transform 1%;里的1%是无效时间，应该用秒（s）或毫秒（ms），比如0.3s。

修复后的完整代码 #

CSS部分

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);
  /* 修复动画属性拼写与单位，添加前缀兼容 */
  animation: scroll 40s linear infinite;
  -webkit-animation: scroll 40s linear infinite;
}

/* 添加webkit前缀的keyframes */
@-webkit-keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 9));
  }
}

@keyframes scroll {
  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 0.3s ease;
}

/* 修复hover伪类与transform合并 */
img:hover {
  transform: translate(20px, 20px);
}

HTML部分（无需修改，保持原结构即可）

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

关于Bootswatch卡片的兼容问题 #

把slider放入Cyborg卡片时，只需确保卡片容器没有设置overflow: hidden（如果有，可调整为overflow: visible或者给slider单独设置position: relative来隔离），同时避免卡片的padding或margin挤压slider的尺寸，保持slider的width: 90%或调整为合适的百分比即可。

内容的提问来源于stack exchange，提问作者Jakub Zak