純粹的CSS3（3,2,1）倒計時

我想創建一個自動啓動然後循環的3秒倒計時。從字面上看，只是說'3'，然後用'2'代替它，最後代替'1'。純粹的CSS3（3,2,1）倒計時

到目前爲止，我試圖代碼是這樣的：

*[class].countdown:before { 
    content: '3' !important; 
    -webkit-animation:countdowns 3s ease-in-out infinite; 
    -moz-animation:countdowns 3s ease-in-out infinite; 
    -ms-animation:countdowns 3s ease-in-out infinite; 
    -o-animation:countdowns 3s ease-in-out infinite; 
    animation:countdowns 3s ease-in-out infinite; 
} 

@-webkit-keyframes countdowns { 
    33% {content: '3' !important;} 
    66% {content: '2' !important;} 
    99% {content: '1' !important;} 
}

然後，我只是有這樣的HTML：

<span class="countdown"></span>

然而，這只是顯示「3」，僅此而已。有人有什麼建議嗎？謝謝！

來源

2014-11-05 Ed Johnson

檢查此鏈接http://thecodeplayer.com/walkthrough/make-a-stopwatch-using-css3-without-images-or-javascript – Aru 2014-11-05 10:32:06

倒計時不是關於造型：它是您的網頁中的信息，因此它應該在HTML代碼中，然後通過JS進行動畫。爲了告訴屏幕閱讀者這些變化，'aria-live'屬性的實現非常簡單：[MDN]（https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions）[MSDN ]（http://msdn.microsoft.com/fr-fr/library/ie/dd433065%28v=vs.85%29.aspx） – FelipeAls 2014-11-05 11:26:42

content屬性不能動畫，因此會被忽略。

的@keyframes documentation狀態：

如果包括不能在關鍵幀規則進行動畫處理的屬性，它們會被忽略，但所支持的屬性仍將動畫。

但是，您可以做的另一種說法，如果被允許使用固定寬度字體。

.countdown:before { 
    content: '321'; 

    font-family:monospace; 
    display:inline-block; 
    width:1ch; 
    overflow:hidden; 

    animation:countdowns 3s steps(3) infinite; 
} 

@keyframes countdowns { 
    0% {text-indent:0} 
    100% {text-indent:-3ch;} 
}

演示在http://jsfiddle.net/gaby/xtcvc4sw/

來源

2014-11-05 10:51:35

的content財產不通過CSS動畫，能。涵蓋什麼是和什麼是不可動畫的Here's a good list。

來源

2014-11-05 10:54:35 rnevius

我確實包含了必要的部分。「內容」屬性不具有動畫效果。「沒有比這更多的了。 – rnevius 2014-11-05 13:51:41

看看加比的答案。它更加詳細和深入。 – Aibrean 2014-11-05 13:52:44

這太好了，爲他贏得了「最高」的答案，但仍然沒有改變答案的重要部分包含在我的事實中。 – rnevius 2014-11-05 13:59:49

純粹的CSS3（3,2,1）倒計時

回答

相關問題