css - @ -webkit-keyframes与他人发生冲突

我在首页的2个横幅上有关键帧动画效果。我将每个横幅定义为不同的类，以便为每个动画选择不同的速度。 HTML看起来像这样：

的HTML

<div class="subpage-image-sca">
        <span class="subpage-image ken-burns-container">
            <img src="http://staging.morningsidepharm.com/wp/wp-content/uploads/2018/09/Header-Image-homepage-compressor.jpg" class="ken-burns-image">
        </span>
</div>


<div class="subpage-image-sca">
        <span class="subpage-image ken-burns-container-20">
            <img src="http://staging.morningsidepharm.com/wp/wp-content/uploads/2018/09/Header-Image-homepage-compressor.jpg" class="ken-burns-image-20">
        </span>
</div>

CSS代码如下所示：

的CSS

/* ------------ Ken Burns 10 Secs ------------- */

.ken-burns-container {
  overflow: hidden;
}

.ken-burns-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-clip: border-box;
  animation: 10s ease-in 0s 1 scaleout;
  -webkit-animation: 10s ease-in 0s 1 scaleout;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes scaleout {
  0% { transform: scale(1); }
   100% {transform: scale(20);
    }
  }



/* ------------ Ken Burns 20 Secs ------------- */

.ken-burns-container-20 {
  overflow: hidden;
}

.ken-burns-image-20 {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-clip: border-box;
  animation: 20s ease-in 0s 1 scaleout;
  -webkit-animation: 20s ease-in 0s 1 scaleout;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes scaleout {
  0% { transform: scale(1); }
   100% {transform: scale(1.17);
    }
  }

继承人JS小提琴：https://jsfiddle.net/shan_2000_uk/yhf4dzrx/10/

CSS的这两个位都可以正常工作。似乎与定义比例的最后一个代码块存在冲突：

@-webkit-keyframes scaleout {
  0% { transform: scale(1); }
   100% {transform: scale(20);
    }
  }

如果我从任一节中删除了此块，则其他工作正常。

我试图像这样将类添加到此块：

.ken-burns-container-20 @-webkit-keyframes scaleout {
  0% { transform: scale(1); }
   100% {transform: scale(1.17);
    }
  }

但这似乎不起作用。

有人知道吗：A：为什么代码会冲突； B：一种使用这两个代码位而又不会发生冲突的方法？

非常感谢您抽出宝贵的时间来查看！

最佳答案

您只是将第一个@keyframe规则替换为最后一个@keyframe规则，可能需要用不同的名称命名它们，让我们为第一个@keyframe使用scaleout1，为最后一个使用scaleout2。

这是一个演示：

.ken-burns-container, .ken-burns-container-20 {
  overflow: hidden;
}
.ken-burns-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-clip: border-box;
  animation: scaleout1 10s ease-in;
  animation-fill-mode: forwards;
}
.ken-burns-image-20 {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-clip: border-box;
  animation: scaleout2 20s ease-in;
  animation-fill-mode: forwards;
}

/* keyframes */
@keyframes scaleout1 {
  0% { transform: scale(1); }
  100% { transform: scale(20); }
}
@keyframes scaleout2 {
  0% { transform: scale(1); }
  100% { transform: scale(1.17); }
}

<div class="subpage-image-sca">
    <span class="subpage-image ken-burns-container">
        <img src="https://via.placeholder.com/300x300" class="ken-burns-image">
    </span>
</div>
<div class="subpage-image-sca">
    <span class="subpage-image ken-burns-container-20">
        <img src="https://via.placeholder.com/500x500" class="ken-burns-image-20">
    </span>
</div>

希望我能进一步推动您。