11521 sujets

JavaScript, DOM et API Web HTML5

Problème de script avec CSS animation.

Bonsoir,

je suis en train de découvrir les possibilités de HTML5 et CSS pour réaliser des animations.
Je souhaite inclure un javascript pour gérer la suite après la fin de l'animation, mais l'ajout de l'insertion du script dans mon code HTML bloque mon animation.
J'ai essayé ceci :

- Insertion dans le HEAD.
- insertion avant la balise </body>

dans tous les cas le script s’exécute mais pas l'animation.

Merci pour vos réponses.

Cordialement
Bonsoir.

Il faudrait peut-être voir plus précisément le code mais a priori je ne vois pas comment un script peut bloquer une animation... La retarder peut-être...

Peut-être faudrait-il faire en sorte que le script ne soit importé qu'une fois l'animation terminée...

Il existe un événement 'animationend' qui est déclenché une fois l'animation CSS terminée...

Pour importer du Javascript, on peut créer une balise script et la raccrocher au DOM.

Smiley smile
Bonjour

j'ai fait ceci comme test :


<!doctype html>
<html class="no-js" lang="fr">
<head>
		<meta charset="UTF-8">
		<title>Essai animation </title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="./testAnimHTML5.css" type="text/css" media="screen" />
</head>
<body>
	 <div class="animation">
  TEST D'ANIMA>TION
  </div>
		
		
<script src="./monJS.js"></script>		
</body>
</html>


Dans le fichier monJS.js pour faire un test j'ai juste mis ceci 

alert('Test')


le CSS est :


.animation {
  animation-name : deplacement;
  animation-duration : 5s;
  background: url(http://localhost/AVARAY/animation.png) 0 0 no-repeat; 
   height: 600px;
  width: 800px;
  margin: auto;
}

@keyframes deplacement {  
  0% {background-position: 0 0; } 
  100% {background-position: 700 0px; } 
}
Bonjour.

En reprenant votre code, l'ajout du petit script JS n'a pas bloqué l'animation mais une petite omission, en revanche... :

@keyframes deplacement {  
  0% {background-position: 0 0; } 
  100% {background-position: 700px 0px; } 
}


Smiley smile
Sujet clos
Aller à