0
CSSアニメーションを使用して文字をアニメーション化しました。私は1つのアニメーションを正常に完了しましたが、他のアニメーションを試してみると、私は奇妙な影響を受けます。 Texture Packerを使用してスプライトシートを作成しています。 1行上のスプライトを維持CSSスプライトシートのアニメーションが動作しない(左右にスクロールする)
- :
は、私の研究を通して、私は別のアプローチを試みました。私は様々なスプライトシートを試しました、 いくつかの行と複数のスプライト移動を含むもの は4 x8です。
- 1つのスプライトシート上の複数の文字の移動(アイドル、実行、ウォーク、
など)。 - 1文字の移動スプライトシートのみを保持する(アイドル状態のみ)。
これは私が試したことのないいくつかのものです。 CSSでスプライトシートがどのように機能するのか、私が簡単な間違いをしているのか、基本的に理解できないのかどうかはわかりません。誰でも自分のアニメーションをどのように動かすかについて考えていますか?
は、ここに私のコードです:
HTML:
<span class="jellyYellow0001 sprite"></span>
CSS:
@keyframes play {
100% { background-position: -127px; } /*I've played with this value*/
}
.sprite {
display:inline-block;
overflow:hidden;
background-repeat: no-repeat;
background-image:url(jellyYellow.png);
width: 130px;
height: 110px;
animation: play 1s steps(8) infinite;
}
.jellyYellow0001 {width:124px; height:108px; background-position: -1px -1px}
.jellyYellow0002 {width:124px; height:108px; background-position: -127px -1px}
.jellyYellow0003 {width:124px; height:108px; background-position: -253px -1px}
.jellyYellow0004 {width:124px; height:108px; background-position: -379px -1px}
.jellyYellow0005 {width:124px; height:108px; background-position: -505px -1px}
.jellyYellow0006 {width:124px; height:108px; background-position: -631px -1px}
.jellyYellow0007 {width:124px; height:108px; background-position: -757px -1px}
.jellyYellow0008 {width:124px; height:108px; background-position: -883px -1px}
.jellyYellow0009 {width:124px; height:108px; background-position: -1009px -1px}
.jellyYellow0010 {width:124px; height:108px; background-position: -1135px -1px}
はここでスプライトシートの1つのバージョンです。
私が試した別のスプライトシートです。 Uアニメーション反復カウントを追加する必要がスプライトセレクタで

'animation-iteration-count:1'を指定すると、右から左にスクロールし続けます。それは私が探しているものではありません。このアニメーションは、キャラクターが呼吸するアイドルアニメーションです。 – BakerShoeMaker