CSS3 애니메이션이 웹킷에서 작동하지 않습니다.

저는 모든 브라우저에서 완벽하게 작동하지만 웹킷에서는 완벽하게 작동하는 애니메이션을 보유하고 있습니다. Webkit에서는 단 하나의 원이 회전하는 반면 다른 것들은 모두 5 개의 원으로 잘 동작합니다. 애니메이션 미리보기는 여기에 있습니다. - http://cssload.net/windows8.html CSS3 애니메이션이 웹킷에서 작동하지 않습니다.

코드에 어떤 문제가 있습니까? 제발 도와주세요 ...

출처

2012-10-30 Timur Gafforov

내 사파리 그냥 정확히 파이어 폭스처럼 회전 5 원을 열었습니다. 문제는 크롬에만 국한되며 내 크롬은 당신이 말한대로 1 서클을 나타 냈습니다 –

내 크롬은 하나의 _ 일정의 원을 보여 주며 가끔 사라집니다. –

크롬이 3D 클라우드의 데모를 표시하는 데 문제가 있음을 기억합니다. 개별 요소는 구름 회전에 따라 움직이는 클리핑 평면과 함께 클리핑됩니다. 아마도 이것은 클리핑 문제입니다. –

해냈어!

문제는 내면 클래스의 불투명도였습니다. Google 크롬에서는 모든 키 프레임에 설정해야했습니다. 이 접근법은 사파리에 대한 효과를 손상시키지 않았습니다.

@-webkit-keyframes orbit { 
    0% { 
     opacity: 1; 
     z-index:99; 
     -webkit-transform: rotate(180deg); 
     -webkit-animation-timing-function: ease-out; 
     } 

    7% { 
     opacity: 1; 
     -webkit-transform: rotate(300deg); 
     -webkit-animation-timing-function: linear; 
     -webkit-origin:0%; 
     } 

    30% { 
     opacity: 1; 
     -webkit-transform:rotate(410deg); 
     -webkit-animation-timing-function: ease-in-out; 
     -webkit-origin:7%; 
     } 

    39% { 
     opacity: 1; 
     -webkit-transform: rotate(645deg); 
     -webkit-animation-timing-function: linear; 
     -webkit-origin:30%; 
     } 

    70% { 
     opacity: 1; 
     -webkit-transform: rotate(770deg); 
     -webkit-animation-timing-function: ease-out; 
     -webkit-origin:39%;  
     } 

    75% { 
     opacity: 1; 
     -webkit-transform: rotate(900deg); 
     -webkit-animation-timing-function: ease-out; 
     -webkit-origin:70%;  
     } 

    76% { 
     opacity: 0; 
     -webkit-transform:rotate(900deg); 
     } 

    100% { 
     opacity: 0; 
     -webkit-transform: rotate(900deg); 
     } 

}

는 여기에 바이올린입니다 :

http://jsfiddle.net/q4wtm/27/

출처

2012-10-30 14:07:19

ooooo ... 고마워 sooooo :) –

오신 것을 환영합니다! 감사합니다. 그렇지 않으면 Google 크롬 및 사파리 웹킷의 css3 구현이 어떻게 든 달라지는 것을 결코 알지 못합니다. –

CSS3 애니메이션이 웹킷에서 작동하지 않습니다.

답변

관련 문제