javascript - CSS3 Infinite Loop Transition -
i trying animate clock having lot of trouble trying numbers loop infinitely. moving numbers incrementing translatey()
when 59th second reached of other numbers fly past transitions 0. smooth transition on 0 continue 1 , on without showing in between.
i've tried transition: none
, animation-play-state: paused
, transitionend event listeners , delays wasn't able use achieve i'm looking for.
link code on jsfiddle http://jsfiddle.net/bwr4yz0s/
the code below outlines 1 failed attempt:
/*seconds*/ if (sec === 0){ /*move fake 0*/ $("#secn").css({transform: 'translatey(-100px))'}); /*turn off animation*/ //$("#secn").css({transition: 'none'}); /*move actual 0*/ //$("#secn").css({transform: 'translatey(0px)'}); /*turn animations on*/ //$("#secn").css({transition: 'all 0.8s'}); } else{ vert = sec*20 + 'px'; $("#secn").css({transform: 'translatey(-'+vert+') translatez(0)'}); }
any appreciated. thanks.
Comments
Post a Comment