Html webkit关键帧在最小化时中断
面对一个奇怪的问题;正在尝试创建微调器。 当我的css缩小时,webkit关键帧的格式会改变;这打破了密码 CSS文件:Html webkit关键帧在最小化时中断,html,css,Html,Css,面对一个奇怪的问题;正在尝试创建微调器。 当我的css缩小时,webkit关键帧的格式会改变;这打破了密码 CSS文件: .newSpinner { margin-top: 21%; width: 100%; text-align: center; position: absolute; } .newSpinner > div { width: 18px; height: 18px; background-color: #333; border-ra
.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:
原件:
@-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)
}
}正如Levi指出的,缩小版中%符号被删除;可能它认为0没有价值。
解决方法是将0%更改为1%,这不是理想的解决方案,但它可以让事情顺利进行。非常欢迎您!总是需要一双新鲜的眼睛来挑出最小的问题。
@-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)
}