Html 纯CSS3（3，2，1）倒计时

我试图创建一个3秒的倒计时，自动开始，然后循环。字面意思是说“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”，仅此而已。有人有什么建议吗？谢谢大家!

content属性无法设置动画，因此会被忽略

各国：

如果在关键帧规则中包含无法设置动画的特性，则会忽略这些特性，但支持的特性仍将设置动画

---

但是，如果允许使用固定宽度字体，您可以用另一种方式来完成

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

---

中的演示

内容

属性无法通过CSS设置动画。这涵盖了什么是可设置动画的，什么是不可设置动画的。

检查此链接倒计时与样式无关：倒计时是页面中的一个信息，因此应该是HTML代码，然后通过JS设置动画。为了让屏幕读者了解这些更改，attribute

aria-live

的实现非常简单：我确实包含了基本部分。“内容属性无法设置动画。”除此之外，没有更多内容。请看Gaby的回答。这是一个更加详细和深入的问题。这很好，为他赢得了“最佳”答案，但仍然不能改变答案的关键部分包含在我的答案中这一事实。