如何在CSS中重复此动画？

代码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很简单，但我不会使用它。

你能告诉我该怎么办吗？我还需要添加其他东西才能工作吗？

预先感谢您！

来源

2017-06-14 Cristi

'动画：登录动画3.5秒0.2秒的步骤（85）向前无限;' – Morpheus

你也可以替代：'动画：登录动画3.5秒0.2秒的步骤（85）向前无限互生;'HTTPS ：//codepen.io/anon/pen/VWKzKw –

您已将'animation-iteration-count'放置在关键帧块之间的无效位置。 '@ keyframes'只接受关键帧块，即'？％{}'或'to/from {}'。你需要把它放在与你的'animation'属性相同的选择器中。既然你正在使用速记'animation'属性，你可以在'animation'中添加一个额外的参数来表示迭代次数，'animation：sign-anim 3.5s 0.2s steps（85）forwards infinite;'。 – hungerstar

退房工作小提琴：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; 
    } 
}

来源

2017-06-14 12:14:04 Shubham

如何在CSS中重复此动画？

回答

相关问题