Javascript 缩放效果（Animate.css）在元素消失和放大之前快速闪烁元素

我有一个图像，我想在页面刷新时放大。图像位于页面的最顶部。当您从另一个网页打开页面时，图像会在那里停留一秒钟，然后消失，然后按元素的预期放大。如何使分秒的外观完全不显示，并使图像从0不透明度缩放

以下是我的项目代码：

@关键帧缩放{
从{
不透明度：0；
-webkit转换：scale3d（0.3,0.3,0.3）；
变换：scale3d（0.3,0.3,0.3）；
}
100% {
不透明度：1；
}
}
.zoomIn{
-webkit动画名称：zoomIn；
动画名称：zoomIn；
}

---

如果在绘制加载的图像和开始动画（可能）之间存在任何延迟，则图像将在短时间内可见，从而导致您看到的闪光。解决方案是在开始时使用

可见性：hidden

设置图像样式，然后将

可见性

设置为

可见

作为动画的第一帧（或使用JavaScript使其可见）。（您也可以先将图像设置为

opacity:0

，但也可以在开始时的一瞬间看到非缩放3D图像，因此您也需要先设置该图像的样式；从

可见性：隐藏开始可能更容易）

顺便说一句，对于编写的代码，在加载图像之前还可能出现动画（对于快速连接和缓存图像，您可能不会注意到这一点）。如果发生这种情况，用户基本上看不到动画。一个解决方案是在图像的
load
事件触发后，只向图像添加动画类（
zoomIn
）。（理想情况下，您可以使用
addEventListener（）
将
load
处理程序附加到图像，但也可以保持简单，直接在
标记中使用
onload
属性。）