Wie kann ich diese Animation in CSS wiederholen?

Ich habe dieses Beispiel:Wie kann ich diese Animation in CSS wiederholen?

HTML-Code:

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

CSS CODE:

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

Ich versuchte animation-iteration-count: infinite; hinzufügen, aber es funktioniert immer noch nicht Arbeit. Mit Jquery ist einfach, aber ich würde es nicht verwenden.

Können Sie mir bitte sagen, was ich tun soll Muss ich etwas anderes hinzufügen, um zu arbeiten?

Vielen Dank im Voraus!

Quelle

2017-06-14 Cristi

'Animation: sign-Anim 3.5s 0.2s Schritten (85) nach vorne unendlich;' – Morpheus

Sie können auch alternative: 'Animation: sign-Anim 3.5s 0.2s Schritten (85) nach vorne unendlich alternativen;' https : //codepen.io/anon/pen/VWKzKw –

Sie haben 'animation-iteration-count' an einer ungültigen Position zwischen Schlüsselbildblöcken platziert. '@ Keyframes' akzeptiert nur Keyframe-Blöcke, d. h.'?% {} 'oder' to/from {} '. Sie müssen es im selben Selektor wie Ihre 'animation' -Eigenschaft platzieren. Da Sie die shorthand 'animation' Eigenschaft verwenden, können Sie' animation' einen zusätzlichen Parameter hinzufügen, um die Iterationszahl anzugeben, 'animation: sign-anim 3.5s 0.2s Schritte (85) vorwärts unendlich;'. – hungerstar

Check out Arbeits Geige: https://jsfiddle.net/ash06229/9ybp4zkp/

ich CSS wenig verändert.

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

Quelle

2017-06-14 12:14:04 Shubham

Wie kann ich diese Animation in CSS wiederholen?

Antwort

Verwandte Themen