css3 countdown

The countdown is very common, and it is impossible to use js at all. What I want to talk about here is only the pure CSS countdown effect for milliseconds.

http://sandbox.runjs.cn/show/duazbiss

Demonstration as above. The last numerical bit is continuously cycled from 0 to 9. This is a pure CSS3 animation, which is achieved by modifying the value of content.

@keyframes clock10 {
	0%,100% {content: '0'}
	10% {content: '9'}
	20% {content: '8'}
	30% {content: '7'}
	40% {content: '6'}
	50% {content: '5'; color: black;}
	60% {content: '4'}
	70% {content: '3'}
	80% {content: '2'}
	90% {content: '1'}
}

animation: clock10 1s linear infinite;

After testing, it can run normally on Android's own browser and chrome. But in Firefox, iOS and webview, the countdown effect does not appear. However, the animation is indeed executed, and the above color: blackis used for comparison and verification.

According to the standard, css is considered to be not (inappropriate) to modify the html content, but the standard is also changing, for example, Chrome is trying this. If feasible and reliable, this capability may be included in the standard in the not too distant future! See this comment on css-tricks

This article was inspired by http://codepen.io/robinrendle/pen/wKqmbW .