Controlling template animation

Hey Guys is there any way I can Pause resume and restart the animation from the beginning depending on the payload i receive from another function. I was able to either resume/ restart and pause/restart with the animation play state but not all three conditions pause/resume/restart.`

.moving {
width: 25px;
height: 25px;
background: grey;
border-radius: 10%;
position: absolute;
top: 44px;
left: 0px;
animation: move 5s infinite;
animation-timing-function: linear;
animation-play-state: {{msg.payload}};

}

@keyframes move {
from{left:0px;}
to{left:480px;}
}

`