Comment puis-je boucle un css animation avec plusieurs images clés des définitions?

La Question

J'ai deux css animations d'image clé qui je suis en cours d'exécution sur un seul élément:

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

Les animations sont définis comme tels:

@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  */ }

Ci-dessus fonctionne, mais quand il arrive à la deuxième animation, il ne cesse de répéter seulement que de l'animation et de ne pas revenir en fade-bg-1.

J'ai essayé beaucoup de différentes combinaisons de animation-direction mais en vain.

La Question

Comment puis-je faire en sorte que l'animation revient à fade-bg-1 et se répète?

L'Exemple

EXEMPLE

J'ai ajouté un bug pour le CSS animation spec à ce sujet.

OriginalL'auteur hitautodestruct | 2014-08-19

  1. 5

    Sans javascript je ne pense pas que vous le pouvez. Cependant, vous pouvez obtenir le même effet en utilisant une seule image-clé de l'animation.

    .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');
    }
}

    EXEMPLE

    Super! Pourquoi ne pas fonctionner comme prévu avec de multiples animations?
    Ce n'est pas vraiment répondre à la question, mais tant que personne ne vient avec une meilleure css seule réponse que je vais accepter la vôtre. Merci!

    OriginalL'auteur Paul

  2. 1

    Je ne suis pas sûr que c'est possible avec juste le css, mais si vous avez défini une méthode setInterval en JS habilement, vous pourriez probablement simuler la même chose en divisant la classe en deux.

    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);

    Avec .fondu-bg-1 et .fondu-bg-2 étant les deux classes d'animation.

    Voici un jsfiddle si vous voulez jouer avec elle.

    J'aurais du remarquer que je ne voulais pas utiliser le javascript pour celui-ci. Merci.
    Ah, d'accord. Eh bien, je suis sûr que c'est pas possible, mais nous allons voir si quelqu'un d'autre peut venir avec quelque chose.

    OriginalL'auteur Gavin Markee