CSS 애니메이션을 사용하여 이미지 애니메이션하기

Question

40ms마다 background-position-y 값을 설정하는 것과 같은 CSS 애니메이션 만 사용하여 고화질 애니메이션 이미지 (예 : gif)를 만들 수 있습니까?

JavaScript를 사용하여이 작업을 수행 할 수 있음을 알고 있지만, 대부분의 브라우저에서 가능하고 지원할 수 있다면 CSS 만 사용하는 것이 좋습니다.

http://i.stack.imgur.com/76EMV.jpg

Answer 1

이것은 CSS에서 keyframes play 및 animation을 사용하여 수행 할 수 있습니다 : 여기

내가 애니메이션을 적용 할 이미지의 예입니다. 유지하려는 FPS로 각 프레임의 배경 위치를 조작해야하며 이미지가 애니메이션으로 표시됩니다.

예를 들어

,

1.뿐만 아니라 원하는 시간 (초), 단계와

@keyframes play { 
    from { background-position: xxpx; } 
    to { background-position: xxpx; } 
} 

2가 재생 만들려면 배경 위치를 결정 루프

.class-name{ 
     -webkit-animation: play .xx steps(xx) infinite; 
     -moz-animation: play .xx steps(xx) infinite; 
     -ms-animation: play .xx steps(xx) infinite; 
     -o-animation: play .xx steps(xx) infinite; 
     animation: play .xx steps(xx) infinite; } 

추신 : xx는 설정하려는 숫자의 더미입니다.

희망이 있습니다.