CSSのステップ（）の変更点は

Question

これはCSSのアニメーションで可能かどうかわかりません...ステップ（）を使用してスプライトをアニメーション化しようとしていますが、特定のフレームを他のものよりも長く（フレーム＃1 .5s 、フレーム＃2 .2s、フレーム＃3~＃5 .1sなど）を含む。私は複数のステップアニメーションを使用しようとしましたが、それは動作していないようです。何か案は？

@keyframes throw{ 
    100% {background-position: 380px;} 
} 
@keyframes hold{ 
    100% {background-position: 760px;} 
} 
@keyframes drop{ 
    100% {background-position: 1520px;} 
} 


#cheerleader{ 
    position:absolute 
    top: 110px; 
    left: 15%; 
    width: 190px; 
    height: 240px; 
    margin: 0 auto; 
    background: url("/assets/images/cheer01.png") left center; 
    animation: 
     throw .5s steps(1, 2) infinite, 
     hold .2s steps(3, 4), 
     drop .8s steps(5, 8), 
} 

ご協力いただきまして誠にありがとうございます。ありがとう！

私の更新されたコードはこれです：

@keyframes hold{ 
    0% { background-position-x: 0px; } 
    100% {background-position-x: 160px; } 
} 
@keyframes grab{ 
    0% {background-position-x: 160px; } 
    100% {background-position-x: 480px; } 
} 
@keyframes propped{ 
    0% {background-position-x: 480px;} 
    100% {background-position-x: 800px;} 
} 
@keyframes throw{ 
    0% {background-position-x: 800px;} 
    100% {background-position-x: 960px;} 
} 
@keyframes catch{ 
    0% {background-position-x: 960px;} 
    100% {background-position-x: 1280px;} 
} 

.cheerpeopleone{ 
    position:absolute; 
    top:110px; 
    left:15%; 
    width:160px; 
    height:320px; 
    margin: 0 auto; 
    background: url('/assets/images/cheerpeopleone.png') left center; 
    animation: 
     hold 0.5s steps(1) infinite, 
     grab 0.3s steps(3) infinite, 
     propped 0.6s steps(2) infinite, 
     throw 0.2s steps(1) infinite, 
     catch 0.3s steps(3) infinite; 
    animation-delay: 0s, .5s, 0.8s, 1.4s, 1.6s; 
    z-index:90; 
} 

しかし、今、私はそれが無限に再生するときに動作していない遅延の問題が生じています。また、人物がフレームに滑り込んでからアニメートするので、私のポジショニングで何かが起こっていると思います。 PNGの全幅は1280ピクセルで、各フレームは160ピクセル幅です。

Answer 1

はい。これは、純粋なCSSアニメーションで行うことができます。最初の2つのフレームが2秒間続き、次の2フレームが0.5秒間、最後の2フレームが3秒間で合計6フレームのデモを作成しました。 animation-delayを調整することもできます。

@keyframes throw{ 
 
    0% { background-position: 0; } 
 
    100% {background-position: -512px; } 
 
} 
 
@keyframes hold{ 
 
    0% {background-position: -512px; } 
 
    100% {background-position: -1024px; } 
 
} 
 
@keyframes drop{ 
 
    0% {background-position: -1024px;} 
 
    100% {background-position: -1280px;} 
 
} 
 

 

 
#cheerleader{ 
 
    position:absolute; 
 
    top: 20px; 
 
    left: 15%; 
 
    width: 256px; 
 
    height: 256px; 
 
    margin: 0 auto; 
 
    background: url("https://cdn.codeandweb.com/blog/2016/05/10/how-to-create-a-sprite-sheet/spritestrip.png") left center; 
 
    -webkit-animation: throw 2s steps(2) forwards, 
 
     hold 0.5s steps(2) forwards, 
 
     drop 3s steps(1) forwards; 
 
     -webkit-animation-delay: 0s, 2s, 2.5s; 
 
}

<div id="cheerleader"></div>