애니메이션이 작동하지 않는 키 프레임 슬라이드

Question

이전 모델의 유사한 모듈에 this 애니메이션을 구현하여 정상적으로 작동했습니다. 오늘 나는 다른 모형에 같은 애니메이션을 사용하고 싶었고 기본적으로 동일한 코드를 복사했습니다. 관련 코드를 모두 jsfiddle에 입력했습니다.

바이올린에서 볼 수 있듯이 블록은 모두 transformY를 준수하고 150px 아래로 이동하지만 (보기로 스크롤하면) 들어오는 애니메이션에 따라 다시 애니메이션을 적용하지 않습니다.

@keyframes come-in { 
to { 
transform: translateY(0); } } 

이전에 사용했을 때 잘 작동했지만 이전에 만든 모형에서 같은 방법으로 작업을 중단 한 것 같습니다. 아무 것도하지 않았 음이 확실합니다. 적절한 클래스가 확실히 적용되므로 jQuery가 작동하는 것처럼 보입니다.이 특정 키 프레임 애니메이션에 문제가있는 것처럼 보입니다.

아이디어가 있으십니까? 나는 엄청나게 분명한 것을 놓치고 있는가? 감사!

Answer 1

물론 그것은 다소 명백했습니다. Chrome에서 작동하지 않는 것으로 밝혀 지므로 접두사를 추가했습니다. 나를 죽이고 무엇

.come-in { 
transform: translateY(150px); 
    animation: come-in 0.2s ease forwards; 
    -webkit-animation: come-in 0.2s ease forwards;} 

@-webkit-keyframes come-in { 
to { 
    transform: translateY(0); } } 

은 불과 몇 주 전에 어떤 이유로 접두사를 필요로하는 것 같지 않았어요 것입니다!