アニメーションをフレームごとに表示する方法

Question

写真があります。どのようにアニメーションを作成するフレームごとにダニの外観？

私はそれをどのように行うことができますか？

Answer 1

背景画像を別の手順で移動したり、置き換えたりするには、CSSアニメーションを使用できます。

ただし、フレーム単位でこの例は行いません。ティックを別の画像に入れて、幅をアニメーション化することで「公開」する方が良いでしょう。 CSSのアニメーションやトランジションのいずれかは、状況によって異なります。

ここでは、画像を使用した例を示しています。残念ながら、画像には円の空の状態がありません。

.foo1, .foo2 { 
 
    width: 100px; 
 
    height: 100px; 
 
    transition: .5s all ease; 
 
    background-image: url('http://i.stack.imgur.com/gzzRl.png'); 
 
    position: absolute; 
 
} 
 

 
.container { 
 
    position: relative; 
 
} 
 

 
.foo2 { 
 
    background-position: -202px 0; 
 
    width: 0; 
 
} 
 

 
.container:hover .foo2 { 
 
    width: 100px; 
 
}

<div class="container"> 
 
    <div class="foo1"> 
 
    </div> 
 
    <div class="foo2"> 
 
    </div> 
 
</div>