CSS3关键帧动画——时钟

仅测试了 chrome 和 firefox。根据资料,IE10 也已经支持 CSS3 关键帧动画了。

特征代码很短,很有表现力,关键帧定义部分:


@keyframes rotate_second {
	0% {
		transform-origin: 25px 10px;
		transform: rotate(0);
	}	
	100% {
		transform-origin: 25px 10px;
		transform: rotate(360deg);
	}
}

应用一个关键帧动画:


selector{animation: rotate_second 6s infinite ease;}

有价值资料

http://msdn.microsoft.com/en-us/ie/hh272902#_CSSAnimations

http://css3animator.com/2010/12/how-to-control-your-css3-animations/

演示链接

http://files.cnblogs.com/ambar/demos/css3/css3_clock.htm

posted @ 2011-11-05 23:31  ambar  阅读(613)  评论(0编辑  收藏