web-dev-qa-db-fra.com

Boucle CSS d'une animation

J'essaie d'apprendre HTML et CSS mais j'ai rencontré un problème:

<style style="text/css">
    div.slide-slow {
        width: 100%;
        overflow: hidden;
    }

    div.slide-slow div.inner {
        animation: slide-slow 30s;
        margin-top: 0%;
    }

    @keyframes slide-slow {
        from {
            margin-left: 100%;
        }

        to {
            margin-left: 0%;
        }
    }
</style>

<div class="slide-slow">
    <div class="inner">
        <img src="http://www.html.am/images/html-codes/marquees/fish-swimming.gif" alt="Swimming fish">
    </div>
</div>

Je veux que ce CSS boucle et ne s'arrête pas seulement quand c'est fait. Est-il possible de faire boucler une fonction CSS?

csscss-animations
26
Raven

Utilisez animation-iteration-count: infinite . Limitez la boucle avec une valeur numérique.

<style style="text/css">
  div.slide-slow {
    width: 100%;
    overflow: hidden;
  }
  div.slide-slow div.inner {
    animation: slide-slow 3s;
    margin-top: 0%;
    animation-iteration-count: infinite;
  }
  @keyframes slide-slow {
    from {
      margin-left: 100%;
    }
    to {
      margin-left: 0%;
    }
  }
</style>

<div class="slide-slow">
  <div class="inner">
    <img src="http://www.html.am/images/html-codes/marquees/fish-swimming.gif" alt="Swimming fish">
  </div>
</div>

Supplémentaire: Pour que la suggestion d'Ismael réalise une animation de va-et-vient avec un effet de retournement, vous pouvez utiliser rotateY(180deg) . Contrairement au retournement à un endroit/position statique, il est préférable de faire pivoter le poisson comme s'il se déplaçait avec le courant d'eau vers l'arrière (animation normale). ease-in-out peut aider à mieux maintenir la fonction de synchronisation. J'ai utilisé width: 40vw Pour que la fonction de rotation soit légèrement sensible/dépend du port d'affichage et ne tourne pas avec trop de décalage.

Jouez avec les valeurs de marge et de largeur pour obtenir une animation appropriée.

<style style="text/css">
  * {
    margin: 0;
    padding: 0;
  }
  div.slide-slow {
    width: 100%;
    overflow: hidden;
  }
  div.slide-slow div.inner {
    animation: slide-slow 15s;
    margin-top: 0%;
    animation-iteration-count: infinite;
    animation-delay: 0s;
    width: 40vw;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
  }
  @keyframes slide-slow {
    0% {
      margin-left: 85%;
    }
    25% {
      margin-left: 20%;
      transform: rotateY(0deg);
    }
    50% {
      margin-left: -25%;
      transform: rotateY(180deg);
      transform-Origin: center center;
    }
    75% {
      margin-left: 50%;
      transform: rotateY(180deg);
    }
    100% {
      margin-left: 85%;
      transform: rotateY(0deg);
    }
  }
</style>

<div class="slide-slow">
  <div class="inner">
    <img src="http://i.stack.imgur.com/nJAsS.gif" alt="Swimming fish">
  </div>
</div>

(source de l'image: http://www.html.am/images/html-codes/marquees/fish-swimming.gif )

30
Manoj Kumar

Vous pouvez ajouter l'appel infini dans la propriété CSS normale animation.

Pour rendre l'animation plus fluide, je recommanderais également d'avoir une étape supplémentaire qui fait disparaître le poisson de l'écran, cela termine simplement l'animation sinon le poisson disparaît.

div.slide-slow {
  width: 100%;
  overflow: hidden;
}
div.slide-slow div.inner {
  animation: slide-slow 3s infinite;
  margin-top: 0%;
}
@keyframes slide-slow {
  from {
    margin-left: 100%;
  }
  75% {
    margin-left: 0%;
  }
  100% {
    margin-left: -15%;
  }
}
<div class="slide-slow">
  <div class="inner">
    <img src="http://www.html.am/images/html-codes/marquees/fish-swimming.gif" alt="Swimming fish">
  </div>
</div>
9
Stewartside

Vous pouvez ajouter cette propriété:

 div.slide-slow div.inner {
      animation-iteration-count:infinite;
 }
8
Marcos Pérez Gude

Je pense que l'ajout de ce code vous aidera .. Cela ajoutera également la direction de l'animation ..

CSS 

div.slide-slow {
   width: 100%;
   overflow: hidden;
}

div.slide-slow div.inner {
   animation: slide-slow 3s;
   margin-top: 0%;
   animation-direction: alternate;
   animation-iteration-count: infinite;
}
4
Amit singh