점멸 때 IE11에서 스프라이트 시트 키 프레임 + 배경에 위치하여

Question

그래서 보행 애니메이션의 16 개 프레임을 포함하는 스프라이트 시트를 가지고 I 의도하여 백그라운드 위치 변경하여 키 프레임을 애니메이션 :

animation: abc 0.55s infinite steps(1); 


    @keyframes abc { 
     0% {background-position(-2250vh,-10vh);} 
     6.67% {background-position(-2100vh,-10vh);} 
     13.33% {background-position(-1950vh,-10vh);} 
     ... 
     100% {background-position(0,-10vh);} 
    } 

을 그것은 크롬과 파이어 폭스에서 잘 작동하지만 IE에서는 애니메이션이 끝날 때 잠깐 사라져 다시 반복됩니다. 깜박임 효과 만들기

애니메이션을 해제하고 콘솔을 사용하여 수동으로 각 위치를 테스트하면 각 프레임이 올바르게 표시되므로 잘못된 위치 지정으로 인한 것이 아닙니다.

Answer 1

배경 위치에 애니메이션을 적용하지 마십시오. 이로 인해 성능 문제가 발생합니다. 대신 img을 사용하고 필요에 따라 키가 크도록하십시오.

<div class="wrapper"> 
    <img class="image" src='some-tall-image.png'/> 
</div> 

이 원하는 프레임만큼 키로 래퍼 높이를 조정 ... 그래서 같은 div에 랩 (당신의 키 프레임에서 나는 150 픽셀을 수를 asumed). 그리고 이보고 싶은 것만을 표시해야 .wrapper

.wrapper { 
    height:150px; 
    overflow:hidden; 
} 

에 overflow:hidden을 설정합니다. 스프라이트 시트의 단일 프레임. 그리고 는 img

@keyframes abc { 
    0% {transform:translateY(-2250vh);} 
    6.67% {transform:translateY(-2100vh);} 
    13.33% {transform:translateY(-1950vh);} 
    100% {transform:translateY(0vh);} 
} 

.image { 
    animation: abc ...; 
} 

예에 사용 transform:translateY() 애니메이션을합니다. 그것을 확인하십시오 ...

을 사용하여 steps(8) 애니메이션의 100 % 키 프레임 만 설정하면됩니다. 나머지는 채워집니다 ... 매직! ... Also created a JSFiddle for ya

스프라이트 시트를 빌 렸습니다. 제작자에게 소품 (코드에서 URL을 볼 수 있음). 이미지의 폭은 960 픽셀입니다. 그래서 제 경우에는 translateY 대신 translateX을 사용했습니다.

@keyframes walking { 
 
    100% { 
 
    transform:translateX(-960px); 
 
    } 
 
} 
 

 
.wrapper { 
 
    overflow:hidden; 
 
    width:120px; 
 
} 
 

 
.image { 
 
    animation:walking 500ms steps(8) infinite; 
 
}

<div class="wrapper"> 
 
    <img class= "image" src="https://www.adamkhoury.com/demo/sprite_sheets/adam.png"> 
 
</div>