如何在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中重複此動畫？

回答

相關問題