IE11でCSSアニメーションが動かなかった

IEで動かなかったコード

div{
  animation: flip-image 1s steps(60) 1;
  &:hover{
    animation-iteration-count: infinite;
  }
}

@keyframes flip-image{
  0%    { background-position: 0 0; }
  100%  { background-position: 0 (- $height); }
}

hoverしたときに連番PNGをエンドレスに回したかった。
animation-iteration-countだけを変更してみたが動かず。

&:hover{
  animation: flip-image 1s steps(60) infinite;
}

あらかじめanimationはつけず、hoverしたときだけanimationをつけてみたら成功。