CSS导入新项目后图片向上滑动动画不完整该如何解决

• 位移动画使用了vh视口相对单位：vh是相对于浏览器视口高度计算的单位，单独测试页面时视口高度刚好让6.66666vh约等于单张广告图的高度，所以动画运行正常。导入其他项目后页面视口尺寸变化，这个计算值和单张图片实际高度不匹配，滑动距离不足，就会出现只滑到一半的问题。
• CSS语法错误导致规则失效：
  1. 嵌套选择器写法错误：写的:first-child:nth-last-child(n)前面多了前置空格，且没有加嵌套关联符&，会导致选择器匹配范围不符合预期，无法正确选中广告容器下的图片列表。
  2. @keyframes动画规则被错误嵌套在.animation-slide-ad-down类选择器内部，原生CSS不支持这种嵌套写法，部分预处理器如果没有配置对应嵌套编译规则，会导致动画定义直接失效，这就是开发者工具里CSS属性被划横线标记的核心原因。

1. 把动画里的位移单位从vh替换为和广告图高度匹配的固定值，你的广告容器高度为71.5px，单张广告图max-height设为72px，直接使用-72px作为单步滑动距离即可，不受外部页面尺寸影响。
2. 把所有@keyframes规则移到最外层，不要嵌套在类选择器块内。
3. 修正选择器写法，直接匹配.animation-slide-ad-down下的直接子图片元素，避免选择器范围偏差。

修正后的CSS #

.ad-container {
  @include screen-calc(width, 521px);
  @include screen-calc(height, 71.5px);
  @include screen-calc(left, 1399px);
  position: absolute;
  background-color: rgba(186, 186, 187, 1);
  overflow: hidden;
  visibility: var(--ad-visibility);
}

.ad-image {
  @include screen-calc(max-height, 72px);
  display: block;
  width: 100%;
  position: relative;
}

.animation-slide-ad-down {
  --ad-animation-duration: 10s;
}

/* 修正选择器，匹配对应数量子元素下的第一个直接子元素 */
.animation-slide-ad-down > :first-child:nth-last-child(2) {
  animation: ad-animation-two calc(var(--ad-animation-duration) * 2) both infinite;
}
.animation-slide-ad-down > :first-child:nth-last-child(3) {
  animation: ad-animation-three calc(var(--ad-animation-duration) * 3) both infinite;
}
.animation-slide-ad-down > :first-child:nth-last-child(4) {
  animation: ad-animation-four calc(var(--ad-animation-duration) * 4) both infinite;
}
.animation-slide-ad-down > :first-child:nth-last-child(5) {
  animation: ad-animation-five calc(var(--ad-animation-duration) * 5) both infinite;
}
.animation-slide-ad-down > :first-child:nth-last-child(6) {
  animation: ad-animation-six calc(var(--ad-animation-duration) * 6) both infinite;
}

/* 所有@keyframes移到最外层，替换vh单位为匹配图片高度的px值 */
@keyframes ad-animation-two {
  0% { margin-top: 0; }
  49% { margin-top: 0; }
  50% { margin-top: -72px; }
  99% { margin-top: -72px; }
  100% { margin-top: 0; }
}
@keyframes ad-animation-three {
  0% { margin-top: 0; }
  32% { margin-top: 0; }
  33% { margin-top: -72px; }
  65% { margin-top: -72px; }
  66% { margin-top: calc(-72px * 2); }
  99% { margin-top: calc(-72px * 2); }
  100% { margin-top: 0; }
}
@keyframes ad-animation-four {
  0% { margin-top: 0; }
  24% { margin-top: 0; }
  25% { margin-top: -72px; }
  49% { margin-top: -72px; }
  50% { margin-top: calc(-72px * 2); }
  74% { margin-top: calc(-72px * 2); }
  75% { margin-top: calc(-72px * 3); }
  99% { margin-top: calc(-72px * 3); }
  100% { margin-top: 0; }
}
@keyframes ad-animation-five {
  0% { margin-top: 0; }
  19% { margin-top: 0; }
  20% { margin-top: -72px; }
  39% { margin-top: -72px; }
  40% { margin-top: calc(-72px * 2); }
  59% { margin-top: calc(-72px * 2); }
  60% { margin-top: calc(-72px * 3); }
  79% { margin-top: calc(-72px * 3); }
  80% { margin-top: calc(-72px * 4); }
  99% { margin-top: calc(-72px * 4); }
  100% { margin-top: 0; }
}
@keyframes ad-animation-six {
  0% { margin-top: 0; }
  15.67% { margin-top: 0; }
  16.67% { margin-top: -72px; }
  32.34% { margin-top: -72px; }
  33.34% { margin-top: calc(-72px * 2); }
  49% { margin-top: calc(-72px * 2); }
  50% { margin-top: calc(-72px * 3); }
  65.67% { margin-top: calc(-72px * 3); }
  66.67% { margin-top: calc(-72px * 4); }
  82.34% { margin-top: calc(-72px * 4); }
  83.34% { margin-top: calc(-72px * 5); }
  99% { margin-top: calc(-72px * 5); }
  100% { margin-top: 0; }
}

如果你用的是SCSS/LESS预处理器，也可以保留嵌套写法，但必须在子选择器前加&关联父级，且确认预处理器支持嵌套@keyframes的编译，否则还是建议把@keyframes放到最外层保证兼容性。

内容的提问来源于stack exchange，提问作者Code Haven