Html 翻转卡片时，背面卡片上的图像在第一次翻转时缓慢出现

我正在玩CSS 3D动画，我遇到了一个奇怪的问题

我在做什么 创建了一张有两面、正面和背面、两个图像的卡片

问题 当卡第一次翻转以显示背面卡时，它不能顺利地完成，您会看到第一张卡在旋转，然后在一瞬间什么也看不到，然后背面卡刚好卡在视图中

奇怪的 这只是第一次翻转出错，之后所有其他翻转看起来都很平滑，这正是我想要的

我认为问题可能是 在第一次翻转发生时，背面图像尚未加载。我试图用

JS

预加载图像，但没有效果

JSFIDLE

这很烦人，我想听听我能不能解决这个问题。我甚至在CSS中加入了每个供应商前缀，但没有任何改变

编辑 我刚刚在FF30中测试了它，它似乎很有效。它在我的Chrome 36.0.1985.125中不起作用。

它似乎在Chrome和FF中起作用

但是，不确定在项目的其他部分使用此方法是否有任何缺点

HTML

---

我可以确认浏览器的不同，也发生在Chrome35上，但是。。。如果我在IE10中加载您的JSFIDLE，第二个图像根本不会出现。这只是地球，镜像。是的，我可能在未来10年内不会得到完全支持。我必须找到另一个解决办法。我认为10年是乐观的。如果你加快动画的速度会怎么样？动画开始悬停。@MindaugasVečkys如果我减慢你的演示，它甚至可以工作。你真是个天才，甚至在IE工作。

<div id="card">
    <div class="card-side front-card"></div>
    <div class="card-side back-card"></div> 
</div>

.front-card {
    background: url(http://images.wisegeek.com/planet-earth.jpg);
}
.back-card {
    background: url(http://haughtonmarsproject.com/wp-content/uploads/2013/11/Mars-1-Project.jpg);
}