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

【问题标题】：@-webkit-keyframes clashing with others@-webkit-keyframes 与其他人发生冲突
【发布时间】：2018-09-26 22:50:59
【问题描述】：

我在主页上的 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); 
    }
  }

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

我已经尝试像这样将类添加到这个块中：

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

但这似乎不起作用。

有谁知道，A：为什么代码冲突和 B：一种使用两种代码而不冲突的方法？

非常感谢您花时间查看！

【问题讨论】：

让我们从keyframes 开始，一段时间以来不需要供应商前缀。
谢谢 Paulie_D - 你认为前缀会导致问题吗？
不...首先，我不清楚您要实现的目标是您不能拥有同名的两个动画...事实上，它们都不是做任何事。
哦，好吧，我没有意识到，我想我可以使用相同的动画名称，只要它被应用于两个不同的类......所以我希望如果我使用例如 scaleout 和 scaleout2，它会起作用...我会检查...
您可以使用相同的动画，但不能更改基本属性（实际关键帧）...可以更改时间/延迟/方向/缓动等，但不能更改您正在制作动画的实际内容.

标签： css css-animations keyframe

【解决方案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>

希望我把你推得更远。

【讨论】：