35

なぜこれが機能しないのですか？私は何を間違っていますか？

CSS

@-webkit-keyframes test {
  0% {
    background-image: url('frame-01.png');
  }
  20% {
    background-image: url('frame-02.png');
  }
  40% {
    background-image: url('frame-03.png');
  }
  60% {
    background-image: url('frame-04.png');
  }
  80% {
    background-image: url('frame-05.png');
  }
  100% {
    background-image: url('frame-06.png');
  }
}

div {
  float: left;
  width: 200px;
  height: 200px;
  -webkit-animation-name: test;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: 2;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: linear;
}

デモ

http://jsfiddle.net/hAGKv/

前もって感謝します！

4

13 に答える 13

31

2020年更新：はい、できます！方法は次のとおりです。

スニペットのデモ:

#mydiv{ animation: changeBg 1s infinite; width:143px; height:100px; }
@keyframes changeBg{
   0%,100%  {background-image: url("https://i.stack.imgur.com/YdrqG.png");}
   25% {background-image: url("https://i.stack.imgur.com/2wKWi.png");}
   50% {background-image: url("https://i.stack.imgur.com/HobHO.png");}
   75% {background-image: url("https://i.stack.imgur.com/3hiHO.png");}
}
<div id='mydiv'></div>

背景画像 [アニメーション化できるプロパティではありません][1] - プロパティをトゥイーンできません。

元の回答: (まだ良い代替手段です) 代わりに、position:absolute を使用してすべての画像を重ね合わせてから、繰り返し必要なものを除いて、すべての画像の不透明度を 0 にアニメートします。

于 2011-09-06T11:56:01.100 に答える
8

Chrome 19.0.1084.41 ベータ版で動作します!

したがって、将来のある時点で、キーフレームは本当に... フレームになる可能性があります!

あなたは未来に生きています;）

于 2012-05-12T21:13:58.373 に答える
4

これは非常に高速で汚いですが、仕事は完了します: jsFiddle

    #img1, #img2, #img3, #img4 {
    width:100%;
    height:100%;
    position:fixed;
    z-index:-1;
    animation-name: test;
    animation-duration: 5s;
    opacity:0;
}
#img2 {
    animation-delay:5s;
    -webkit-animation-delay:5s
}
#img3 {
    animation-delay:10s;
    -webkit-animation-delay:10s
}
#img4 {
    animation-delay:15s;
    -webkit-animation-delay:15s
}

@-webkit-keyframes test {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
    }
}
@keyframes test {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
    }
}

jQueryを使用して自分のサイトで同様の作業を行っていますが、ユーザーがページを下にスクロールすると遷移がトリガーされます - jsFiddle

于 2013-03-25T17:07:53.820 に答える
3

私はあなたと同じことをする必要があり、あなたの質問にたどり着きました。hereから読んだsteps関数について調べました。

動作中の私のソリューションの JSFiddle (現在、Firefox で動作することに注意してください。クロスブラウザの行を追加して、ソリューションをすっきりさせようとします)

最初に、2 つのフレームを持つスプライト シートを作成しました。次に、div を作成して背景として配置しましたが、div はスプライトのサイズ (100px) しかありません。

<div id="cyclist"></div>

#cyclist {
    animation: cyclist 1s infinite steps(2);
    display: block;
    width: 100px;
    height: 100px;
    background-image: url('../images/cyclist-test.png');
    background-repeat: no-repeat;
    background-position: top left;
  }

アニメーションには 2 つのステップがあり、プロセス全体に 1 秒かかるように設定されています。

@keyframes cyclist {
  0% {
    background-position: 0 0; 
   }
  100% { 
    background-position: 0 -202px; //this should be cleaned up, my sprite sheet is 202px by accident, it should be 200px
   }
}

上でチアゴはステップ関数について言及しましたが、私はそれについてもっと詳しく説明したいと思いました。かなりシンプルで素晴らしいもの。

于 2014-12-17T20:59:14.117 に答える
2

linearタイミング関数は、定義されたプロパティを直線的にアニメーション化します。背景画像の場合、アニメーションのフレームを変更しているときにこのフェード/サイズ変更効果があるようです（標準的な動作かどうかはわかりませんが、@ Chukie Bのアプローチを使用します）。

関数を使用するstepsと、離散的にアニメーション化されます。詳細については、 MDNのタイミング関数のドキュメントを参照してください。あなたの場合、次のようにしてください：

-webkit-animation-timing-function: steps(1,end);
animation-timing-function: steps(1,end);

このjsFiddleを参照してください。

それも標準的な振る舞いかどうかはわかりませんが、ステップが 1 つだけになると言うと、@keyframesセクションの開始点を変更できるようになります。このようにして、アニメーションの各フレームを定義できます。

于 2013-05-21T20:21:20.570 に答える
1

上記のように、アニメーションの背景画像を変更することはできません。画像を 1 つのスプライト シートに配置し、背景の位置を変更してアニメーション化することが最善の解決策であることがわかりましたが、モバイル用にビルドする場合、スプライト シートは 1900x1900 ピクセル未満に制限されます。

于 2011-10-06T18:59:16.343 に答える
0

あなたはこのコードに従うことができます：

#cd{
  position: relative;
  margin: 0 auto;
  height: 281px;
  width: 450px;
}
#cf img{
  left: 0;
  position: absolute;
  -moz-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
#cf img.top:hover{
  opacity: 0;
}
<div id="cf">
  <img class="button" src="Birdman.jpg" />
  <img src="Turtle.jpg" class="top" />
</div>

于 2012-12-28T05:26:15.760 に答える
0

アニメーションの background-position プロパティとスプライト画像を使用できます。

于 2014-05-22T16:58:18.530 に答える
0

私は最近同じことをする必要がありました。ここに簡単な実装があります

#wrapper { width:100%; height:100%; position:relative; }
#wrapper img { position:absolute; top:0; left:0; width:100%; height:auto; display:block; }
#wrapper .top { animation:fadeOut 2s ease-in-out; animation-fill-mode:forwards; }
@keyframes fadeOut {
  0% { opacity:1; }
  100% { opacity:0; }
}
<div id="wrapper">
  <img src="img1.jpg" class="top" style="z-index:2;">
  <img src="img2.jpg" style="z-index:1;">
</div>

于 2015-10-22T04:15:46.257 に答える
-1

まあ、私はクロムでそれらを変更することができます. シンプルで、-webkit css プロパティを使用して Chrome で正常に動作します。

于 2012-11-06T10:37:28.577 に答える