[Résolu] Figer une animation par Catman95 - page 1

23 mai 2018 à 10:56:30

Bonjour à tous,

Je suis en train de réaliser un Slideshow avec un bordereau READ en animation.

Ce bordereau a une course de -10 px à 10 px et doit se répéter sur les 3 slides.

Mon problème est que l'animation se répète en boucle toutes les 46s sur une même slide. En enlevant le "infinite" de animation, cela ne change à priori rien. J'aimerai supprimer cet effet de bouclage

<section id="slideshow">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="X.JPG" style="width:100%">
  <a href="X.html">
  	<figcaption><div class="text"><strong>&gt;READ</strong></div></figcaption>
  </a>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="X.JPG" style="width:100%">
  <a href="X.html">
	 <figcaption><div class="text"><strong>&gt;READ</strong></div></figcaption>
  </a>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="X.JPG" style="width:100%">
  <a href="X.html">
  	<figcaption><div class="text"><strong>&gt;READ</strong></div></figcaption>
  </a>
</div>

</section>

@keyframes figcaptionner {
	0%				{ bottom: -10px;}
	5%, 100%		{ bottom: 10px;	}
}

#slideshow figcaption {
	animation: figcaptionner 46s infinite;
}

Merci par avance pour votre aide.

-
Edité par Catman95 23 mai 2018 à 10:59:02

Lamecarlate

23 mai 2018 à 11:17:48

Bonjour,

suivant la spec (https://www.w3.org/TR/css-animations-1/#animation-iteration-count ), ne pas préciser "infinite" devrait en effet lancer l'animation une fois et pas plus. Et je confirme que c'est bien le cas : https://codepen.io/anon/pen/eroMXx (copie rapide de ton code, j'ai enlevé les images, et changé le "46" en "4" pour les besoins du debug).

Autres points : par défaut l'animation revient à son point de départ, ce n'est peut-être pas ce que tu veux. Dans ce cas, jette un œil à https://www.w3.org/TR/css-animations-1/#animation-fill-mode

Et surtout : valide ton code. <figcaption> en dehors de <figure> c'est non. D'autant qu'il doit être un enfant direct de <figure>, donc le lien devra être à l'intérieur et non autour. Et le "alt" des images n'est pas optionnel.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Offkors

23 mai 2018 à 11:21:47

Salut,

Si tu veux que l'animation reste à son emplacement final ex : Un bloc se déplace d'un point à au point B, tu veux qu'une fois l'animation réalisée, ce bloc reste sur le point B, il te suffit d'indiquer : animation-fill-mode: forwards;