使用CSS3动画事件（animation events）实现的时钟

Clock using CSS3 animation events Refer to: http://www.w3.org/TR/css3-animations/#animation-events 通常我们使用JS的setInterval() 或 requestAnimationFrame() 方法来定时。本例使用CSS3中的"animationiteration" 事件（event）来实现类似功能。该事件由 "animation-iteration" css属性所触发。该属性可以被JS所访问和修改。

CSS3,时钟

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2535
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var clock;

function Clock() {
    this.domEl = document.getElementById('clock');
    // we could update the animation duration directly in JS with the 
    // following piece of code as well, here to set it to 1 second for instance:
    // this.container.style.animationDuration="1s";
}

Clock.prototype.start = function() {
    var func = this.tick.bind(this);

this.domEl.addEventListener("oAnimationIteration", func, false);
    this.domEl.addEventListener("MSAnimationIteration", func, false);
    this.domEl.addEventListener("webkitAnimationIteration", func, false);
    this.domEl.addEventListener("mozAnimationIteration", func, false);
    this.domEl.addEventListener("animationiteration", func, false);
};

/**
 * Update the clock time. Method called on each animation interation
 **/
Clock.prototype.tick = function() {
    var date = new Date();

// we add zero paddings just for make it prettier
    // source: http://stackoverflow.com/questions/10073699/pad-a-number-with-leading-zeros-in-javascript#comment-33639551
    this.domEl.innerHTML = ("00" + date.getHours()).substr(-2, 2) + ':' + ("00" + date.getMinutes()).substr(-2, 2) + ':' + ("00" + date.getSeconds()).substr(-2, 2) + ' ' + ("000" + date.getMilliseconds()).substr(-3, 3) + 'ms';
};

clock = new Clock();
clock.start();

编译

CSS

/*
 * In webkit browsers, no property is necessary
 */
/*
 * @todo: test on IE
*/

html {
    font-size: 62.5%;
}
body {
    font-family: arial, helvetica, sans;
    text-align: center;
    font-size: 1.4em;
}
#clock {
    margin: 2em auto;
    /* 
 * I have a "clock" div element and applied the animation css on it but
 * I could also have applied it to the body element directly
 */
    
    font-size: 5em;
}
#clock {
    -webkit-animation: clock 1ms alternate infinite;
    -moz-animation: clock 1ms alternate infinite;
    -o-animation: clock 1ms alternate infinite;
    -ms-animation: clock 1ms alternate infinite;
    /*
 * For that to work correctly in Opera and Firefox
 * we need at least the 100% key frame with a property set. I've just put
 * a dummy property so it works.
 */
    
    animation: clock 1ms alternate infinite;
}
@-o-keyframes clock {
    100% {
        color: #000;
    }
}
@-moz-keyframes clock {
    100% {
        color: #000;
    }
}
@keyframes clock {
    0% {
        color: #000;
    }
    100% {
        color: #000;
    }
}

HTML

CSS3,时钟

编辑器支持Emmet

快捷键

CSS3,时钟

使用CSS3 PerspectiveTransform实现的逼真3D地球自转动画

使用CSS3矩阵变换（transform:matrix）实现的圆周运动

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：