IE의 키 프레임 백 러닝 애니메이션에 몇 가지 문제가 있습니다.

IE의 키프 레임 배경 애니메이션에 몇 가지 문제가 있습니다. 페이지로드시 화면 밖으로 벗어난 위치로 몇 개의 이미지를 가져 오려고합니다. 이 코드는 Chrome에서 훌륭하게 작동하지만 IE에는 애니메이션이 표시되지 않습니다.IE의 키 프레임 백 러닝 애니메이션에 몇 가지 문제가 있습니다.

여기에 애니메이션 내 코드입니다 :

@keyframes slideUp { 
    from { background-position: left 50em, right 50em, left 50em, right 50em; } 
    to { background-position: left bottom, right bottom, left bottom, right bottom; } 
} 

.content00001.page_container{ 
    background-image: url('../images/content00001/Asset9.png'), url('../images/content00001/Asset10.png'), url('../images/content00001/Asset11.png'), url('../images/content00001/Asset12.png'); 
    background-repeat: no-repeat; 
    background-position: left bottom, right bottom, left bottom, right bottom; 
    background-size: 22% 100%, 22% 100%, 22% 70%, 22% 70%; 
    -webkit-animation: 1.2s ease 0s slideUp; 
     -moz-animation: 1.2s ease 0s slideUp; 
     -o--animation: 1.2s ease 0s slideUp; 
      animation: 1.2s ease 0s slideUp; 
}

내가 좋은 것 여기에 누락 무엇에 어떤 도움!

출처

2017-11-07 A.Davidson

키 프레임을 복사하고 -webkit- 접두사를 추가해야 할 수도 있습니다. '에서'0 %로 변경해보십시오.

@-webkit-keyframes slideUp { 
    0% { background-position: left 50em, right 50em, left 50em, right 50em; } 
    to { background-position: left bottom, right bottom, left bottom, right bottom; } 
}

출처

2017-11-07 23:23:19 mdurchholz

감사합니다. 하지만 여전히 IE에 표시되지 않습니다 ... 그들은 단지 IE의 페이지에 팝업과 크롬에 큰 애니메이션. 나는 여기서 잃어 버렸어. 백그라운드 위치를 옮기는 것 이외의 다른 애니메이션이나 변형을 시도 할까? –

어떤 IE 버전을 사용하고 있습니까? 또 다른 유용한 팁은 동일한 요소에서 절대로 transition 및 animation 속성을 함께 사용하지 않는 것입니다. 이상하게 들리 겠지만 일부 브라우저에서는 문제가 발생합니다. – mdurchholz

IE의 키 프레임 백 러닝 애니메이션에 몇 가지 문제가 있습니다.

답변

관련 문제