@-webkit-关键帧与他人冲突
@-webkit-关键帧与他人冲突
提问于 2018-09-26 14:24:23
我有一个关键帧动画效果在我的主页上的2个横幅。我已经定义了每个横幅有一个不同的类，这样我就可以为每个动画选择不同的速度。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：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:使用这两种代码的方式，而不是它们之间的冲突？
非常感谢你抽出时间来看！
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-09-26 14:50:59
您只是用最后一个规则覆盖第一个@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>
希望我把你推得更远了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52520027
复制相关文章
相似问题
腾讯云开发者
