在iPhone 4上波涛汹涌CSS3动画 [英] Choppy CSS3 animation on iPhone 4

问题描述

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

I have a pretty simple (or at least I think it is) animation. All I'm animating is the -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动画的演示。我要对这个动画走错了路？

It works nicely in Safari on the desktop, but on the iPhone, the animation is very choppy. Which is odd, because I've seen lots of demonstrations of CSS animation on my iPhone that run silky smooth. Am I going about this animation the wrong way?

基本上，它是在0％开出，可扩展到100％，那么95％，那么100％演讲泡沫。有点像一个弹跳出缓解的效果。

Basically, it's a speech bubble that starts out at 0%, scales up to 100%, then 95%, then 100%. Sort of like a bounce-out ease effect.

推荐答案

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

Try to add -webkit-transform:transform to the bubble css

这篇关于在iPhone 4上波涛汹涌CSS3动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！