2011-09-08 103 views
1

我正在嘗試使用css3動畫移動一段文本。 Safari和iPad UIWebview的動畫效果不太理想。這裏是code。有沒有辦法讓它更順暢?當我爲圖像製作動畫時更加明顯。我使用了不同的計時功能,但仍然不順暢。簡單的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> 

回答

2

它必須做什麼複合層最大限度地減少重新繪製。您可以在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