如何在CSS中重复此动画？

我有这个样本：

代码HTML:

<div class="quote">
              <a id="dex-sign" class="play" href="http://drygiel.com" target="_blank"></a>
      </div>

#dex-sign {
    display: inline-block;
    margin: 30px 10px 15px 10px;
    width: 255px;
    height: 84px;
    background: url(http://drygiel.com/projects/sign/frames.png) no-repeat;
}

#dex-sign.play {
    -moz-animation: sign-anim 3.5s 0.2s steps(85) forwards;
    -o-animation: sign-anim 3.5s 0.2s steps(85) forwards;
    -webkit-animation: sign-anim 3.5s 0.2s steps(85) forwards;
    animation: sign-anim 3.5s 0.2s steps(85) forwards;
}
a#dex-sign {
    opacity: .9;
}
a#dex-sign:hover {
    opacity: 1;
    -webkit-filter: invert(30%) brightness(80%) sepia(100%) contrast(110%) saturate(953%) hue-rotate(165deg);
}
@-webkit-keyframes sign-anim {
    to {
        background-position: 0 -7140px;
    }
  animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
}
@-moz-keyframes sign-anim {
    to {
        background-position: 0 -7140px;
    }
 animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
}
@keyframes sign-anim {
    to {
        background-position: 0 -7140px;
    }
  animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
}

我尝试添加

动画迭代计数：无限但它仍然不起作用。
使用Jquery很简单，但我不会使用它

你能告诉我应该做什么吗？我需要在工作中添加其他东西吗

提前谢谢你
 查看工作小提琴：

我稍微改变了你的CSS

#dex-sign.play {
    -moz-animation: sign-anim 3.5s 0.2s steps(85) forwards;
    -o-animation: sign-anim 3.5s 0.2s steps(85) forwards;
    -webkit-animation: sign-anim 3.5s 0.2s steps(85) forwards;
    animation: sign-anim 3.5s 0.2s steps(85) forwards;
    -webkit-animation-duration: 5000ms;
            animation-duration: 5000ms;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
}
@keyframes sign-anim {
    to {
        background-position: 0 -7140px;
    }
}

动画：将动画3.5s 0.2s步数（85）向前无限签名您还可以选择：
动画：为动画3.5s 0.2s步数（85）签名，然后选择无限交替
您已将
动画迭代计数
放置在关键帧块之间的无效位置
@keyframes
仅接受关键帧块，即
？%{}
或
到/从{}
。您需要将其放置在与
动画
属性相同的选择器中。由于您使用的是速记
动画
属性，因此可以在
动画
中添加一个附加参数来表示迭代计数，
动画：为动画3.5s 0.2s步骤（85）签名。