Animation iPhone4上起伏的CSS3动画

我有一个非常简单（或者至少我认为是）的动画。我所做的动画是-webkit背景大小

#bubble { position:relative; width:397px; height:326px; background:url('../img/mobile/webkit/bubble.png') no-repeat bottom right; -webkit-background-size:100% 100%; -webkit-animation-name:resize; -webkit-animation-duration:1s; -webkit-animation-iteration-count:1; -webkit-animation-timing-function: ease-in; }

@-webkit-keyframes resize {
    0% { -webkit-background-size:0% 0%; }
    90% { -webkit-background-size:100% 100%; }
    95% { -webkit-background-size:95% 95%; }
    100% { -webkit-background-size:100% 100%; }
}

它在桌面上的Safari中工作得很好，但在iPhone上，动画非常不稳定。这很奇怪，因为我在我的iPhone上看到了很多CSS动画的演示，运行起来非常流畅。我是不是搞错了这部动画

---

基本上，它是一个语音泡沫，从0%开始，扩展到100%，然后是95%，然后是100%。有点像弹跳出来的轻松效果。

尝试添加-webkit转换：转换到气泡css

你必须做一些技巧，以允许GPU启动，如果你可以缩放整个div，而不仅仅是背景，那么这将使其平滑

#bubble { 
  position:relative; 
  width:397px; 
  height:326px; 
  background:url('../img/mobile/webkit/bubble.png') no-repeat bottom right; 
  -webkit-background-size:100% 100%; 
  -webkit-animation: resize 1s ease-in 1; /*shorthands are better!*/
  -webkit-transform: scale3d(100%, 100%, 1);
}

@-webkit-keyframes resize {
    0% { -webkit-transform: scale3d(0%, 0%, 1); }
    90% { -webkit-transform: scale3d(100%, 100%, 1); }
    95% { -webkit-transform: scale3d(95%, 95%, 1); }
    100% { -webkit-transform: scale3d(100%, 100%, 1); }
}

---

您是否能够在某个地方发布一个实时演示，例如，我们这些使用iPhone的人可以检查渲染/行为？