Google 크롬에서 작동하지 않는 CSS3 애니메이션

Question

Google 크롬에서 몇 주 전부터 작업 한 애니메이션이 있습니다. 나는 아무것도 바뀌지 않았고 갑자기 그 일이 멈췄다. 저는 몇몇 사람들에게 웹 사이트를 누구에게 알리는 지 질문했습니다. 아무도 애니메이션이 작동하지 않는 이유에 관해서는 제게 정답을 줄 수 없습니다.

나는 잎이 떨어질 때 떨어지는 애니메이션을 웹 사이트에 남깁니다. 이미지는 브라우저에 따라 "떨어집니다"(개발자 도구에서 링크 태그 위로 마우스를 가져 가면 파란색 상자가 떨어지는 것을 볼 수 있음) 실제 이미지는 그대로 있거나 화면에 몇 픽셀 만 떨어집니다. 왜 이런 일이 일어나고 있는지 전혀 모르겠다. 정말 혼란 스럽다.

그래서 어떻게 될까요? 사용자가 리프를 클릭하고 jquery가 클래스를 변경하며 리프 애니메이션이 트리거되어 리프가 떨어지는 것처럼 보입니다.

@-webkit-keyframes fallingLeaves { 
0% { 
    opacity: 1; 
    -webkit-transform: translate(0, 10px) rotateZ(0deg); 
    -moz-transform: translate(0, 10px) rotateZ(0deg); 
    -ms-transform: translate(0, 10px) rotateZ(0deg); 
    -o-transform: translate(0, 10px) rotateZ(0deg); 
    transform: translate(0, 10px) rotateZ(0deg); 
    z-index: 100; 
} 
75% { 
     opacity: 1; 
     -webkit-transform: translate(100px, 600px) rotateZ(270deg); 
     -moz-transform: translate(100px, 600px) rotateZ(270deg); 
     -ms-transform: translate(100px, 600px) rotateZ(270deg); 
     -o-transform: translate(100px, 600px) rotateZ(270deg); 
     transform: translate(100px, 600px) rotateZ(270deg); 
     z-index: 100; 
} 
100% { 
     opacity: 0; 
     -webkit-transform: translate(150px, 800px) rotateZ(360deg); 
     -moz-transform: translate(150px, 800px) rotateZ(360deg); 
     -ms-transform: translate(150px, 800px) rotateZ(360deg); 
     -o-transform: translate(150px, 800px) rotateZ(360deg); 
     transform: translate(150px, 800px) rotateZ(360deg); 
     z-index: 100; 
} 

}

이 잎의 하나의 애니메이션 중 하나입니다 (잎이 다르게 떨어질 수 있도록하는 다양한 애니메이션이 있습니다).

누구든지 나를 도와 줄 수 있다면 정말 좋을 것입니다. 나는 많은 것을 시도하고 꽤 많은 사람들에게 물었고 아무 것도 얻지 못했습니다. 그래서 당신이 그것을 확인하실 수 있습니다 감사합니다

이에있는 웹 사이트는 www.shearmadnesshoboken.com

나는 애니메이션이 리눅스에서 구글 크롬에 대한 작업을 수행주의해야합니다. 나는 또한 그것이 사파리에서 모두 작동한다고 생각하지만 나뭇잎 중 하나가 올바르게 거기에 떨어진다. (왜 그 중 하나가 떨어지지 않는지는 네,하지만 그렇다).

Answer 1

이것은 브라우저 버그와 같습니다. Linux 버전이 (Mac?) 버전과 같은지 확인하십시오. 내가 발견 한 해결 방법은 첫 번째 키 프레임에서 rotateZ(0deg)을 제거하는 것입니다 (실제로 지정할 필요는 없습니다).

0% { 
    opacity: 1; 
    -webkit-transform: translate(0, 10px); 
    -moz-transform: translate(0, 10px); 
    -ms-transform: translate(0, 10px); 
    -o-transform: translate(0, 10px); 
    transform: translate(0, 10px); 
    z-index: 100; 
}