计时器中的动画（向下滑动）时间变化

Question

我有一个计时器，它使用setInterval每1秒更新一次。

我希望每次更新动画都会向下滑动或向上滑动秒数。与分钟和小时相同。

我的功能看起来像这样：

var RenderTime = setInterval(function(){
    function(){
        return hour + minute + second;
};};1);

我所拥有的代码与此处的示例略有不同，而且效果很好。我的问题是我想添加动画来滑下时间变化。

更新： 我想要实现的一个例子（就动画而言，不是风格）： http://ro31337.github.io/jQuery-Countdown-Timer/

Answer 1

有几种方法可以做到这一点。

CSS动画或Javascript？

使用CSS，您可以为您喜欢的任何属性设置动画。只需在要设置动画的数字中添加一个类。

@keyframes mymove {
    from {top: 0px;}
    to {top: -200px;}
}
.animate-move {
    animation: mymove 1s;
}

http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

Javascript动画的性能更高，但比CSS动画更受支持。

// Example in jQuery
$(".number").animate({
    top: -200,
}, 1000);

http://api.jquery.com/animate/

您制作动画的CSS属性是什么？

主要有三种方式：

1. position:absolute和top属性。
2. 否定margin属性（您的示例）
3. transform property（transform: translateY(-200)）

使用CSS动画的示例

https://jsfiddle.net/tj8nrrcf/