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

Question

我的主页上有 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 fiddle :https://jsfiddle.net/shan_2000_uk/yhf4dzrx/10/

这两段 CSS 本身都可以正常工作。似乎与定义比例的最后一段代码有冲突:

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

如果我从其中一个部分中删除此 block ，则另一个部分可以正常工作。

我试过像这样将类添加到这个 block 中:

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

但这似乎行不通。

有谁知道，A:为什么代码会发生冲突，B:一种在不冲突的情况下同时使用这两种代码的方法？

非常感谢您抽出时间来看!

Answer 1

您只是覆盖了第一个 @keyframe最后一个规则，您可能需要用不同的名称来命名它们，让我们为第一个 @keyframe 指定 scaleout1和 scaleout2 最后一个 @keyframe .

这是一个演示:

.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>

希望我能进一步插入你。