Plusieurs animations CSS identiques dans un court laps de temps
Bonjour,
Je crée un jeu pour apprendre le développement web disponible ici: https://romain672.github.io/CV-MEESE...A9s/index.html , et j'essaye de rajouter des animations dessus.
J'ai des cartes à effets par exemple "⚔️💖💖💖" qui vont par exemple infliger 1 unité de dégât ⚔️ et soigner 3 💖.
J'ai créé une animation qui permet de faire bouger un "💖" d'une div à une autre en ajoutant et enlevant une classe a une div (code ci-dessous), mais je ne peux faire bouger qu'un seul élément à la fois.
J'aurais aimé pouvoir créer 4 animations, trois de 💖 et un de ⚔️ partant et allant dans différentes divs (avec genre "animation-delay: 0s, 0.1s, 0.2s").
De ce que j'ai pu lire, le seul truc que je me sens capable de faire c'est de créer un id sur l'animation en cours, et copier/coller 100 fois une partie du code de manière à créer un maximum de 100 animations en même temps. Je pense que ça marcherait, mais le html serait moche et ce serait pas très efficace.
Merci :)
J'ai rajouté une div "anim" dans le html: <div id="anim"></div>.
Mon animation dans le css:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| #anim{
visibility: hidden;
}
.startanimation{
position: absolute;
visibility: visible;
-webkit-animation: moving 2.5s;
animation: moving 2.5s ease;
animation-name: heart;
}
@keyframes heart {
from {
left: var(--ls, 0px);
top: var(--ts, 0px);
visibility: visible;
}
to {
left: var(--le, 0px);
top: var(--te, 0px);
visibility: hidden;
}
} |
Et enfin du javascript qui avec une string, une div de départ et une div d'arrivé permet de faire bouger une animation:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
| function animate(string, start, end) {
document.getElementById("anim").classList.add("startanimation");
let var1= document.getElementById(start).getBoundingClientRect();
let var2= document.getElementById(end).getBoundingClientRect();
document.getElementById("anim").textContent = string;
document.getElementById("anim").style.setProperty("--ls", var1.left + "px");
document.getElementById("anim").style.setProperty("--ts", var1.top + "px");
document.getElementById("anim").style.setProperty("--le", var2.left + "px");
document.getElementById("anim").style.setProperty("--te", var2.top + "px");
setTimeout(() => {
document.getElementById("anim").classList.remove("startanimation");
}, 2500);
} |
