Boucle CSS 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 pas simplement s'arrêter quand il est fait. Est-il possible de créer une fonction CSS à boucle?
4 réponses
Utiliser 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>Autre: pour la suggestion D'Ismael de réaliser une animation de va-et-vient avec un effet flip, vous pouvez faire usage de rotateY(180deg). Contrairement au retournement à un endroit/position statique, il est préférable de faire tourner 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 le maintien de la fonction de synchronisation de mieux. J'ai utilisé width: 40vw pour la fonction de rotation d'être légèrement responsive / voir dépendant du port et de ne pas tourner avec trop de décalage.
jouer avec les valeurs de marge et de largeur pour obtenir l'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)
vous pouvez ajouter l'appel infini dans la normale animation propriété CSS.
Pour rendre l'animation plus fluide, je recommande également d'avoir une étape supplémentaire qui rend les poissons hors de l'écran, c'est juste terminé 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>Vous pouvez ajouter cette propriété:
div.slide-slow div.inner {
animation-iteration-count:infinite;
}
je pense que juste ajouter ce code vous aidera.. Cela ajoutera également la direction d'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;
}