纯粹的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）倒计时

回答

相关问题