animation Résolu/Fermé

Question

Bonjour, 

J'ai une animation, c'est une petite anim rigolotte qui ne pose pas de problème normalement ^^ mais la si... le délais ne s'oppère qu'une seule fois ...

.anim2 {
  animation: 3s linear 10s infinite moving2;
}

@keyframes moving2 {
  from {
    left: -100%;
  }
  to {
    left: 100%;
  }
}


J'aimerais qu'elle attende 10s avant de se relancer, elle le fait au début mais après le délais ne se fait plus ...

Configuration: Windows / Chrome 99.0.4844.84

anthonyr_25 · Answer

C'est bon j'ai trouvé une solution toute bète ;)

.anim2 {
  animation: 10s linear 10s infinite moving2;
}

@keyframes moving2 {
  from {
    left: -100%;
  }
  20% {
    
  }
  30% {
    left: 100%;
  }
  40% {
    left: 100%;
  }
  50% {
    left: 100%;
  }
  60% {
    left: 100%;
  }
  70% {
    left: 100%;
  }
  80% {
    left: 100%;
  }
  90% {
    left: 100%;
  }
  to {
    left: 100%;
  }
}

declique69 · Answer

Tout à fait normal : le délai este appliqué au démarrage, mais ne sert plus à rien ensuite.

ON peut contourner ça en définissant l'animation sur 20 secondes, les 10 premières secondes ne faisant pas évoluer la valeur.

.anim2 {
  animation: 20s linear infinite moving2;
}

@keyframes moving2 {
  from {left: -100%; }
  50% {left:-100%; }
to {left: 100%;}
 }


Beaucoup d'exemples d'animations ici :  http://stylescss.free.fr/v2-properties/animation.php

Animation

2 réponses

Discussions similaires