ステップ（）を使用してスプライトシートをアニメーション化する

サイトでgifを使用したくないが、より良い色のためにPNGを好むが、それでもそれらをアニメーション化する必要がある場合、以下の方法があります。



CSSキーフレームアニメーションには、 animation-timing-functionというプロパティがあります。 その機能の1つは、次の例のように、 steps（）関数を使用することです 。

div { animation: play 1s steps(10) infinite; } @keyframes play { 0% { background-position: 0px 0; } 100% { background-position: -500px 0; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

他のアニメーション関数との違いは、0pxから-500pxへのスムーズな移動の代わりに、間に一時停止のある鋭いジャンプがあることです。 これは、スプライトフレームシートを使用するアニメーションに最適です。 上記の例では、ステップは50ピクセルで、一時停止は100ミリ秒（合計10ステップ）です。



ここに小さなデモがあります。



ご覧のとおり、アニメーションの再生速度を変更できますが、これは非常に楽しいですが、問題があります。アニメーションは常に最初のフレームから開始されるため、ぎくしゃくします。 また、アニメーションの継続時間（親から継承）をアニメーション化しようとしましたが、残念ながらこれはサポートされていません。 したがって、より動的な速度制御（アニメーションのアニメーション）が必要な場合、javascriptに頼る必要があります。



追記。 このトリックの実際の使用例は、 Impendingロゴです。