2011-09-08 3 views
1

css3 애니메이션을 사용하여 텍스트 블록을 이동하려고합니다. Safari 및 iPad UIWebview에서는 애니메이션이 부드럽 지 않습니다. 여기에 code입니다. 훨씬 더 매끄럽게 만들 수있는 방법이 있습니까? 이미지를 움직일 때 더 눈에.니다. 다른 타이밍 기능을 사용했지만 여전히 원활하지 않습니다.간단한 css3 애니메이션이 사파리와 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의 플래그를 사용하여 '합성 렌더 레이어 테두리'라는 복합 레이어를 볼 수 있습니다.

-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

관련 문제