스프라이트 애니메이션에 반응하기

Question

스프라이트가있는 작은 애니메이션을 만들고 싶고 그에 가장 적합한 도구/라이브러리를 찾고 싶습니다. 기본적으로 나는 비 고유 네이티브에 대한 keyframes에 해당하는 것이 무엇인지 알고 싶습니다.

gif를 만들려고했지만 투명도에 많은 인공물이 있습니다. phaser/pixi.js와 같은 것을 사용할 수는 있지만 단순한 애니메이션 일뿐입니다.

CSS의 애니메이션 (또는 등가 사용 JS) :

Answer 1

간단한 방법이있다

{ 
     width: 100px; 
     height: 100px; 
     position: absolute; 
     left: 50%; 
     top: 50%; 
     transform: translate(-50%, -50%); 
     background: url(https://cssanimation.rocks/images/posts/steps/heart.png) no-repeat; 
     background-position: 0 0; 
     cursor: pointer; 
     animation: fave-heart 1s steps(28); 
    } 
    .heart:hover { 
     background-position: -2800px 0; 
     transition: background 1s steps(28); 
    } 
    @keyframes fave-heart { 
     0% { 
     background-position: 0 0; 
     } 
     100% { 
     background-position: -2800px 0; 
     } 
    } 

http://codepen.io/mindstorm/pen/aZZvKq

반작용-spriteseet : https://github.com/frostney/react-spritesheet