js或css制作时钟问题

Question

思路是通过animate控制下面表盘的数字向上平移，js获取本地时间后，修改了三个ul的li的顺序，例如本地时间为17:02:30，在秒钟从30到00时，分钟却不会进1，只有重新转到30，分钟才进1，怎么才能让它在00的时候进1？表达不是很清楚，我自己都有点晕，请谅解。

css:
.hour {
    animation: h 43200s steps(60, end) infinite;
}
.minute {
    animation: ms 3600s steps(60, end) infinite;
}
.second {
    animation: ms 60s steps(60, end) infinite;
}            
<!-- 一个li的高度为42px -->
@keyframes ms {to { transform:translateY(-2520px) }}
@keyframes h {to { transform:translateY(-1008px) }
html:
<ul class="hour">
    <li>01</li>
    。
    。
    。
    <li>23</li>
    <li>00</li>
</ul>
<ul class="minute">
    <li>01</li>
    <li>02</li>
    。
    。
    。
    <li>59</li>
    <li>00</li>
</ul>
<ul class="second">
    <li>01</li>
    <li>02</li>
    。
    。
    。
    <li>59</li>
    <li>00</li>
</ul>

Answer 1

30到00是什么鬼？你确定不是59到00?