web-dev-qa-db-ja.com

CSS3アニメーションで背景画像を変更する

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

[〜＃〜] 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;
}

[〜＃〜] demo [〜＃〜]

http://jsfiddle.net/hAGKv/

前もって感謝します！

csscss3background-imagecss-animations
28
Charles Thomason

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

代わりに、position：absoluteを使用してすべての画像を重ねて配置し、繰り返したいものを除くすべての画像の不透明度を0にアニメートします。

24
Rich Bradshaw

Chrome 19.0.1084.41 beta！

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

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

8
Luke Stanley

これは本当に速くて汚いですが、仕事は完了します： 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

3
apaul

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

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

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

こちらをご覧ください jsFiddle 。

それが標準的な動作なのかどうかはわかりませんが、ステップが1つしかないという場合、@keyframesセクションの開始点を変更できます。この方法で、アニメーションの各フレームを定義できます。

2
Thiago Cardoso

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

実行中の私のソリューションのJSFiddle （Firefoxで現在動作していることに注意してください、クロスブラウザ行を追加して、ソリューションを整理してください

最初に作成したのは 2フレームのスプライトシート です。次に、divを作成し、それを背景として配置しましたが、divはSpriteのサイズ（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
   }
}

上記のチアゴはsteps関数について述べました しかし、私はそれについてもっと詳しく説明したいと思いました。非常にシンプルで素晴らしいもの。

2
Gazillion

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

1
Chuckie B

私のために働く。遷移にbackground-imageを使用していることに注意してください。

#poster-img {
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  overflow: hidden;
  -webkit-transition: background-image 1s ease-in-out;
  transition: background-image 1s ease-in-out;
}
1
drtf

次のコードをフォローできます。

#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>
0
Toeur Tenh

アニメーション化された背景位置プロパティとスプライト画像を使用できます。

0
BigBadAlien

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

#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>
0
BlueSix