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/

演示链接

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