Question

我有这个样本：

代码HTML：

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

CODE CSS：

#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;
}

我尝试添加animation-iteration-count: infinite;但它仍然不起作用。使用Jquery很简单，但我不会使用它。

你能告诉我应该做些什么吗？我还需要添加别的东西吗？

提前谢谢！

Answer 1

查看工作小提琴：https://jsfiddle.net/ash06229/9ybp4zkp/

我稍微改变了你的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;
    }
}

如何在CSS中重复此动画？

1 个答案: