css3倒计时

倒计时很常见，完全不用js是不行的，这里想说的只是针对毫秒的纯css倒计时效果。

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

演示如上。最后一个数值位，不断的从0~9循环，这是一个纯css3动画，通过修改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;

经测试，在安卓自带浏览器和chrome，可以正常运行。但是在火狐、iOS和webview里，均不会出现倒数效果。然而动画确实是执行了的，以上的color: black便是用于对比验证。

根据标准，css被认为是不应当（不适合）修改html内容，不过标准也在变化，例如Chrome就在做这方面的尝试。如果可行可靠，这种能力可能会在不远的将来被纳入标准！ 参见css-tricks上的这条评论

本文受 http://codepen.io/robinrendle/pen/wKqmbW 启发。