How can I repeat this animation in CSS? - css

Question

I have this sample:
link
CODE 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;
}
I tried to add animation-iteration-count: infinite; But it still does not work.
With Jquery is simple but I would not use it.
Can you please tell me what I should do?Do I have to add something else to work?
Thank you in advance !

Answer 1

Check out working fiddle: https://jsfiddle.net/ash06229/9ybp4zkp/
I changed your CSS little bit.
#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;
}
}