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

Question

I'm trying to create a 3 second countdown which automatically starts and then loops. Literally just saying '3' then replaces it with '2' and then finally '1'.

So far the code I'm trying is this:

*[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;}
}

Then I simply have this as the HTML:

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

However this just displays '3' and nothing more. Anybody got any suggestions? Thank you!

Answer 1

The content property cannot be animated so it gets ignored.

The @keyframes documentation states:

If you include properties that can't be animated in your keyframe rules, they get ignored, but the supported properties will still be animated.

---

You can however do it in another way, if are allowed to use fixed-width fonts.

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

Demo at http://jsfiddle.net/gaby/xtcvc4sw/

Answer 2

The content property isn't animate-able via CSS. Here's a good list that covers what is and what isn't animatable.