How to control when @keyframes is activated?

I wanted to use @keyframes, so I did this:

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: action 5s infinite;
}

@keyframes action {
  0%   {top: 0px;}
  25%  {top: 200px;}
  75%  {top: 50px}
  100% {top: 100px;}
}

However, this code runs when the page loads. Is there a way to trigger the @keyframes at a certain time with js? eg.

for (var i = 0; i < 10; i++) {
    //Do something
}
//Activate @keyframes

Thanks!