スプライトアニメーションに反応する

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