Question

我正在尝试为时钟设置动画但是我在尝试让数字无限循环时遇到了很多麻烦。我通过递增translateY()来移动数字，但是当达到第59秒时，所有其他数字都会飞过，因为它会转换回0.我希望平滑过渡到0以继续到1，依此类推显示介于两者之间的任何内容。

我已经尝试了transition: none，animation-play-state: paused，transitionEnd事件监听器甚至延迟，但我无法使用任何设备来实现我所寻找的目标。< / p>

链接到JSFiddle上的代码http://jsfiddle.net/bwr4yz0s/

下面的代码概述了一次失败的尝试：

/*Seconds*/
if (sec === 0){    
  /*Move to fake 0*/
  $("#secn").css({transform: 'translateY(-100px))'});

  /*Turn off animation*/
  //$("#secn").css({transition: 'none'});

  /*Move back to actual 0*/
  //$("#secn").css({transform: 'translateY(0px)'});

  /*Turn animations back on*/    
  //$("#secn").css({transition: 'all 0.8s'});

}
else{    
  vert = sec*20 + 'px'; 
  $("#secn").css({transform: 'translateY(-'+vert+') translateZ(0)'});
}

非常感谢任何帮助。感谢。

CSS3无限循环过渡

0 个答案: