After pressing button the animation does not repeat

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>

Answer

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>