HTML5/CSS3翻旋动画（二）

HTML5/CSS3翻转动画（二）
    上一篇我们制作了两行文字的翻转效果，他们是同步进行的，当然不同步也可以设置时间不同。而有时我们想时间上是相同的，但是翻转效果是不同的，这点也不难做，我们再编写一组翻转动画CSS即可：

    那么目前为止，这部分内容的基本原理就介绍完了，下面我们进行集成，把这个效果用于我们的后台页面，之前我们加入了锁屏效果，那么现在就加个锁屏之后的计时效果，计时的文字顺便翻转显示，我们继续来改造代码：

    每1秒执行一次定时器，将filpText中的文字改成离开的秒数，这里为了演示方便，不对秒数增大进行分钟的处理，那么我们可以得到如下效果：

    下面应用动画效果，加一句代码就行了：

    最后不要忘了在滑块解锁后，清除计时器，否则时间还会继续累加的：
$("#slider").draggable({        axis: 'x',        containment: 'parent',        drag: function(event, ui) {            if (ui.position.left > slideWidth*0.7) {                $("#slide").fadeOut();                $("#overlay").fadeOut();$("#flip").fadeOut();window.clearInterval(seconds);            } else {            }        },        stop: function(event, ui) {            if (ui.position.left < slideWidth*0.7) {                $(this).animate({left: 0});            }        }});
    
    也就是window.clearInterval(seconds);这句，那么这个实例中我们又加入了CSS翻转动画来计算离开的时间，实例也就越来越丰富了。
    那么CSS动画部分就介绍完了，附件中有涉及到的图片和我们一直更新的实例源码，希望对使用者有用。