2017-09-07 29 views
0

CSSアニメーションを使用して文字をアニメーション化しました。私は1つのアニメーションを正常に完了しましたが、他のアニメーションを試してみると、私は奇妙な影響を受けます。 Texture Packerを使用してスプライトシートを作成しています。 1行上のスプライトを維持CSSスプライトシートのアニメーションが動作しない(左右にスクロールする)

  • results

    は、私の研究を通して、私は別のアプローチを試みました。私は様々なスプライトシートを試しました、 いくつかの行と複数のスプライト移動を含むもの は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アニメーション反復カウントを追加する必要がスプライトセレクタで

Sprite sheet 2

答えて

0

@keyframes play { 
 
    100% { background-position: -127px; } /*I've played with this value*/ 
 
} 
 

 

 
.sprite { 
 
\t display:inline-block; 
 
    overflow:hidden; 
 
    background-repeat: no-repeat; 
 
    background-image:url(https://i.stack.imgur.com/y0Xxv.png); 
 
    width: 130px; 
 
    height: 110px; 
 
    animation: play 1s steps(8) infinite; 
 
\t animation-iteration-count: 1; 
 

 
} 
 

 
.jellyYellow0001 {width:124px; height:108px; background-position: -1px -1px}
<span class="jellyYellow0001 sprite"></span>

:1。

+0

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

関連する問題