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小提琴：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：一种使用这两个代码位而又没有冲突的方法？

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

Answer 1

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

希望我进一步推动了你。

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

1 个答案: