野生動物園和iPad UIWebView上簡單的CSS3動畫並不流暢
[英]simple css3 animation is not smooth on safari and iPad UIWebView
問題描述
我正在嘗試使用css3動畫移動文本塊。 Safari和iPad UIWebview上的動畫不流暢。 這是代碼 。 有沒有辦法使它更平滑？ 當我為圖像設置動畫時，它會更加明顯。 我使用了不同的計時功能，但仍然不流暢。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
width:100px;
height:100px;
position:relative;
-webkit-animation-name: mymove;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode:forwards;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
}
@-webkit-keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<div>Move this block</div>
</body>
</html>
3 個解決方案
解決方案1
4 2011-10-26 19:23:10
您可以嘗試通過在動畫div上添加-webkit-transform：translateZ（0）來“強制硬件加速”
在這里嘗試： http : //jsfiddle.net/aHWzN/
更新：您現在可以使用will-change來確保動畫更加流暢： https : //developer.mozilla.org/en-US/docs/Web/CSS/will-change
.foo {will-change: left}
解決方案2
2 2012-05-18 18:29:01
它必須執行最小化重繪的復合層。 您可以在Chrome中的about：flags中啟用此功能，以查看稱為“合成渲染層邊框”的復合層。
使用-webkit-transform時：translate3d（0,0,0）通常會將其“踢”入復合層。 它還為動畫做准備。
例如，如果您有圖像輪播，並且要對圖像進行動畫處理，請首先放置-webkit-transform：translate3d（0，0，0）; 在img上。
但是，僅此一項並不能解決iPad中動畫的閃爍問題。
通過指定計時功能，它可以更好地處理動畫，您將獲得流暢的效果。
-webkit-timing-function：cubic-bezier（0.42，0，0.58，1.0）; 正在放松。
昨天，我做了一個簡單的滑動圖像輪播，該輪播在iPad 1上可以正常使用。https://github.com/grandecomplex/imagecarousel
解決方案3
1 2011-11-28 17:53:58
您可能想看一下我同事的博客文章。 他深入討論了iOS動畫的性能，以及一段視頻，展示了iOS版本之間的性能差異。 http://uncorkedstudios.com/2011/11/18/animation-performance-disparity-on-ios/
CSS動畫僅在iPad上崩潰Safari
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.