web-dev-qa-db-ja.com

複数のキーフレーム定義でCSSアニメーションをループするにはどうすればよいですか？

問題

1つの要素で実行している2つのcssキーフレームアニメーションがあります。

.fade-bg {
  animation-name: fade-bg-1, fade-bg-2;
  animation-delay: 0, 6s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

アニメーションは次のように定義されています。

@keyframes fade-bg-1 {

  from {
      opacity: 0;
      background-image: url(image-1.jpg);
  }

  50% {
      opacity: 1;
      background-image: url(image-1.jpg);
  }

  to {
      opacity: 0;
      background-image: url(image-1.jpg);
  }

}

@keyframes fade-bg-2 { /* Same as fade-bg-1 only with image-2.jpg  */ }

上記は機能しますが、2番目のアニメーションに到達すると、そのアニメーションのみを繰り返し続け、fade-bg-1にループバックしません。

animation-directionのさまざまな組み合わせを試しましたが、うまくいきませんでした。

質問

アニメーションがfade-bg-1に戻って繰り返されるようにするにはどうすればよいですか？

例

EXAMPLE

cssanimationcss-animations
13
hitautodestruct

JavaScriptがなければ、私はそうは思いません。ただし、単一のキーフレームアニメーションを使用して同じ効果を得ることができます。

.fade-bg {
  animation-name: fade-bg;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: forward;
}


@keyframes fade-bg {
    0% {
        opacity: 0;
        background-image: url('image-1.jpg');
    }

    25% {
        opacity: 1;
        background-image: url('image-1.jpg');
    }

    50% {
        opacity: 0;
        background-image: url('image-1.jpg');
    }

    51% {
        opacity: 0;
        background-image: url('image-2.jpg');
    }

    75% {
        opacity: 1;
        background-image: url('image-2.jpg');
    }

    100% {
        opacity: 0;
        background-image: url('image-2.jpg');
    }
}

EXAMPLE

10
user3942918

CSSだけでこれが可能かどうかはわかりませんが、JSでsetIntervalメソッドをうまく設定した場合、クラスを2つに分割することで同じことをシミュレートできるでしょう。

var index = 1;

function switchBackground() {
   if (index == 1) {
      //this switches to  the first background
      var div = document.getElementById("yourDiv");
      div.className = "fade-bg-1";
      index = 0;
   }
   else {
      //this switches to  the second background
      var div = document.getElementById("yourDiv");
      div.className = "fade-bg-2";
      index = 1;
   }
}

setInterval(switchBackground(), 6000);

.fade-bg-1と.fade-bg-2は2つのアニメーションクラスです。

遊びたい場合は jsfiddle をご覧ください。

1
Gavin Markee