Keyframmes en javascript
Posté : 13 sept. 2024, 11:59
Bonjour,
J'ai créé un petit programme de deux images. Lorsque l'on clique sur la première image elle se colorie en bleu, et clignote pendant quelques secondes, et la deuxième image se colorie en rouge.
Lorsque l'on clique sur la deuxième image, elle se colorie en bleu et clignote, et la première image de colorie en rouge.
Toutefois si l'on renouvelle l'opération, les couleurs alternent bien, mais le clignotement ne s'opère plus.
Je pense qu'il existe une solution, pour que le clignotement s'opère à chaque click.
Je joins ce petit programme ci-dessous :
Merci à l'avance si on peux me dépaner.
Gérard
<!DOCTYPE HTML>
<html>
<head>
<title>Clignotement de pion</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
<style>
#case1, #case2 {
width:50px;
height:50px;
display: block;
border: 1px solid black;
animation-duration: .2s;
animation-iteration-count: 15;
transition: none;
}
@keyframes clignoter {
0% { opacity:1; }
40% {opacity:0; }
100% { opacity:1; }
}
</style>
</head>
<body>
<h3>Clignotement de PION</h3>
<div id="case1"><img src="pionBlanc.png"></div>
<div id="case2"><img src="pionNoir.png"></div>
<script type="text/javascript">
const case1=document.getElementById("case1");
const case2=document.getElementById("case2");
case1.addEventListener ('click', function() {x=1; case1.style.backgroundColor="cyan"; couleur()});
case2.addEventListener ('click', function() {x=2; case2.style.backgroundColor="cyan"; couleur()});
function couleur () {
if (x===1){case1.style.animationName="clignoter"; case2.style.backgroundColor="red"}
if (x===2){case2.style.animationName="clignoter";case1.style.backgroundColor="red"}
}
</script>
</body>
</html>
J'ai créé un petit programme de deux images. Lorsque l'on clique sur la première image elle se colorie en bleu, et clignote pendant quelques secondes, et la deuxième image se colorie en rouge.
Lorsque l'on clique sur la deuxième image, elle se colorie en bleu et clignote, et la première image de colorie en rouge.
Toutefois si l'on renouvelle l'opération, les couleurs alternent bien, mais le clignotement ne s'opère plus.
Je pense qu'il existe une solution, pour que le clignotement s'opère à chaque click.
Je joins ce petit programme ci-dessous :
Merci à l'avance si on peux me dépaner.
Gérard
<!DOCTYPE HTML>
<html>
<head>
<title>Clignotement de pion</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
<style>
#case1, #case2 {
width:50px;
height:50px;
display: block;
border: 1px solid black;
animation-duration: .2s;
animation-iteration-count: 15;
transition: none;
}
@keyframes clignoter {
0% { opacity:1; }
40% {opacity:0; }
100% { opacity:1; }
}
</style>
</head>
<body>
<h3>Clignotement de PION</h3>
<div id="case1"><img src="pionBlanc.png"></div>
<div id="case2"><img src="pionNoir.png"></div>
<script type="text/javascript">
const case1=document.getElementById("case1");
const case2=document.getElementById("case2");
case1.addEventListener ('click', function() {x=1; case1.style.backgroundColor="cyan"; couleur()});
case2.addEventListener ('click', function() {x=2; case2.style.backgroundColor="cyan"; couleur()});
function couleur () {
if (x===1){case1.style.animationName="clignoter"; case2.style.backgroundColor="red"}
if (x===2){case2.style.animationName="clignoter";case1.style.backgroundColor="red"}
}
</script>
</body>
</html>
case1.style.animationName=" "; et case2.style.animationName=" "; ) supprime et annule purement et simplement la fonction du clignotement. Le clignotement ne fonctionne plus du tout.