Question

我创建的这个动画在Safari和Firefox中运行良好，但在Chrome中运行不正常。当我在Chrome中运行它时，它会跳过动画中的帧。它基本上看起来像是滞后但是没有办法。我在下面的代码中将background-image属性留空，但实际上我使用的图像大约为244kb。

这是我的班级：

.splatImage{
text-align:center;
position: absolute;
margin-left:auto;
margin-right:auto;
left:0;
right:0;
-webkit-animation-name: splatImage;
animation-name: splatImage;
opacity:1;
height:85vh;
/*background-image:url("");*/
background-size:contain;
background-repeat: no-repeat;
background-position: center;
bottom:0;
top:0;
margin-bottom:auto;
margin-top:8vh;

-webkit-animation-duration: 1.3s;
-webkit-animation-timing-function: linear;
animation-duration: 1.3s;
animation-timing-function: linear;

visibility: visible !important;
}

这是我的关键帧动画：

@-webkit-keyframes splatImage {
0%{
    opacity:0;
    height:45vh;
    top:0;
    margin-top:25vh;
}
95%{
    opacity:0;
    height:45vh;
    margin-top:25vh;
}
96%{
    opacity:1;
    height:45vh;
    top:0;
    margin-top:25vh;
}
100%{
    height:85vh;
    margin-top:8vh;
    opacity:1;
}
}

@keyframes splatImage {
0%{
    opacity:0;
    height:45vh;
    margin-top:25vh;
}
95%{
    opacity:0;
    height:45vh;
    margin-top:25vh;
}
96%{
    opacity:1;
    height:45vh;
    top:0;
    margin-top:25vh;
}
100%{
    height:85vh;
    margin-top:8vh;
    opacity:1;
}
}

我只是在一个简单的HTML div中使用它：

<div class="splatImage"></div>

请告诉我这里我做错了什么。我读过它可能与Chrome有问题，因为自40版以来CSS动画有问题但是我猜这些错误现在已经修复了。

如果有办法简单地让Chrome忽略动画，我也可以使用它。

非常感谢任何帮助。

为什么我的CSS动画在Chrome中不流畅？

0 个答案: