After pressing button the animation does not repeat

Question

What am I doing wrong, that after pressing the button the animation does not repeat? Thanks for help.

var  abox = document.getElementsByClassName("box")[0];
function allmove(){
       abox.classList.toggle("move");
}

.vector img {
    width: 20%;
    height: 20%;
    position: relative;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 1;  
}
@-webkit-keyframes example{
    0%{left:0px; top:0px;}
    25%{left:200px; top:0px;}
    100%{left:0px; top:0px;}
}

<div class="box"></div>
<div class="vector">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSqYooppFTzO8AydhbeZtjnrWpeZS5b7Gbi9EnwEPuuPW_t6ycn" />
</div>
<button class="button" onclick="allmove()">Click Me</button>

@CedricGourville This is all code inspired by this: https://stackoverflow.com/a/54251634/12130396 — vmahth1, Nov 11 '19 at 01:26
I need to know if in your .move class you have set the example keyframes animation? like in the .vector class — , Nov 11 '19 at 01:32
I do not have .move class , I used it as in the example in js — vmahth1, Nov 11 '19 at 01:34
I want the animation to be done again after pressing the button, I know my code is wrong and I don't know how to fix it — vmahth1, Nov 11 '19 at 01:47

score 0 · Accepted Answer · answered Nov 11 '19 at 01:49

You can use something like this to refresh animation on click.

I added .animation class to separate it from vector class.This way you can easly toggle it.

the setTimeout is to wait a moment before adding the class after removing it.

var  abox = document.getElementsByClassName("animation")[0];
function allmove(){
    abox.classList.remove("animation");
    setTimeout(function(){ abox.classList.add('animation') }, 100);
}

    .vector img {
        width: 20%;
        height: 20%;
        position: relative;
 
    }
    .animation img {
        animation-name: example;
        animation-duration: 4s;
        animation-iteration-count: 1; 
    }
    @-webkit-keyframes example{
        0%{left:0px; top:0px;}
        25%{left:200px; top:0px;}
        100%{left:0px; top:0px;}
    }

    <div class="box"></div>
    <div class="vector animation">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSqYooppFTzO8AydhbeZtjnrWpeZS5b7Gbi9EnwEPuuPW_t6ycn" />
    </div>
    <button class="button" onclick="allmove()">Click Me</button>

score 0 · Answer 2 · answered Nov 11 '19 at 01:55

That's it, but I think addEventListener is better than onclick()

I modify a bit your code

You can find jsfiddle example Here

const bike = document.querySelector(".bike");
const button = document.querySelector(".button");

function allMove(){
       bike.classList.toggle("move");
}

button.addEventListener('click', allMove);

.vector img {
    width: 20%;
    height: 20%;
    position: relative;
    
}

.move{
  
     animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 1;  
}

@-webkit-keyframes example{
    0%{left:0px; top:0px;}
    25%{left:200px; top:0px;}
    100%{left:0px; top:0px;}
}

<div class="box"></div>
<div class="vector">
  <img class="bike" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSqYooppFTzO8AydhbeZtjnrWpeZS5b7Gbi9EnwEPuuPW_t6ycn" />
</div>
<button class="button">Click Me</button>

Abbas Hosseini · Answer 3 · 2021-03-16T17:38:54.840

Inspired by Mehdi Ayari's answer, but I think using requestAnimationFrame is better than using a timeout.

var abox = document.querySelector(".animation");
function allmove() {
  requestAnimationFrame(() => {
    abox.classList.remove("animation");
    requestAnimationFrame(() => abox.classList.add("animation"));
  });
}

.vector img {
        width: 20%;
        height: 20%;
        position: relative;
 
    }
    .animation img {
        animation-name: example;
        animation-duration: 4s;
        animation-iteration-count: 1; 
    }
    @-webkit-keyframes example{
        0%{left:0px; top:0px;}
        25%{left:200px; top:0px;}
        100%{left:0px; top:0px;}
    }

 <div class="box"></div>
    <div class="vector animation">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSqYooppFTzO8AydhbeZtjnrWpeZS5b7Gbi9EnwEPuuPW_t6ycn" />
    </div>
    <button class="button" onclick="allmove()">Click Me</button>

After pressing button the animation does not repeat

3 Answers3