Question

我有一个非常简单（或者至少我认为是）的动画。我所有的动画都是-webkit-background-size。

#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％。有点像弹跳缓和效果。

Answer 1

如果你可以扩展整个div而不仅仅是背景，那么你必须做一些允许GPU启动的技巧，这将使它变得顺畅......

#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); }
}

Answer 2

尝试将-webkit-transform：transform添加到bubble css

iPhone 4上的Choppy CSS3动画

2 个答案: