遇到一个奇怪的问题;试图创建一个微调器。 当我的 css 被缩小时,webkit 关键帧的格式发生变化;这会破坏代码。
CSS 文件:
.newSpinner {
margin-top: 21%;
width: 100%;
text-align: center;
position: absolute;
}
.newSpinner > div {
width: 18px;
height: 18px;
background-color: #333;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.newSpinner .bounce1 {
-webkit-animation-delay: -0.50s;
animation-delay: -0.50s;
}
.newSpinner .bounce2 {
-webkit-animation-delay: -0.42s;
animation-delay: -0.42s;
}
.newSpinner .bounce3 {
-webkit-animation-delay: -0.30s;
animation-delay: -0.30s;
}
.newSpinner .bounce4 {
-webkit-animation-delay: -0.20s;
animation-delay: -0.20s;
}
.newSpinner .bounce5 {
-webkit-animation-delay: -0.10s;
animation-delay: -0.10s;
}
@-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0) }
40% { -webkit-transform: scale(1.0) }
}
HTML:
<div class="newSpinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
<div class="bounce4"></div>
<div class="bounce5"></div>
</div>
fiddle :https://jsfiddle.net/zo70h82c/
问题发生在这里:下面的代码是我上面提到的那部分代码的缩小版本
@-webkit-keyframes sk-bouncedelay {
0,80%,100% {
-webkit-transform: scale(0)
}
40% {
-webkit-transform: scale(1.0)
}
}
原文:
@-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0) }
40% { -webkit-transform: scale(1.0) }
}
最佳答案
缩小版在 0 之后缺少一个 %。
@-webkit-keyframes sk-bouncedelay {
0%,80%,100% {
-webkit-transform: scale(0)
}
40% {
-webkit-transform: scale(1.0)
}
}
关于html - webkit 关键帧在最小化时中断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45552211/