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

Question

我的主页上有 2 个横幅有关键帧动画效果。我已将每个横幅定义为具有不同的 class，因此我可以为每个动画选择不同的速度。 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); 
    }
  }

如果我从任何一个部分中删除此块，另一个部分都可以正常工作。

我试过像这样将 class 添加到此块中：

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

但这似乎不起作用。

有谁知道，A：为什么代码会冲突以及 B：一种同时使用两段代码而不冲突的方法？

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

Answer 1

您只是用最后一个规则覆盖了第一个 @keyframe 规则，您可能需要用不同的名称来命名它们，让我们为第一个 scaleout1 @keyframe 和 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>

希望我能把你推得更远。

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

@-webkit-keyframes clashing with others

css

keyframe

css-animations