How to animate minutes and seconds separately?

Question

css

Good afternoon! I have a timer, I want to attach an animation to it. Code like this:

$('#timer span').text(minute + ':' + second).
css({'marginTop':'-20px','opacity':'0'}).
animate({'marginTop':'0px','opacity':'1'});

The problem is that the entire timer block is animated, but it is necessary that seconds and minutes are animated separately.
Timer:

<div id="timer" class="winner1" style="color:#fff; font-weight:bold;"><span id="timer-1" class="timer-digit">0</span><span id="timer-2" class="timer-digit">2</span>:<span id="timer-3" class="timer-digit">0</span><span id="timer-4" class="timer-digit">0</span>
                                            </div>

Answer 1

Your code is bullshit in my opinion... there are four spans in the div, and you give each span a minute + ':' + second , then you try to raise all the spans 20 pixels up, and at the end, for some reason, set the animation of the movement of all these spans 20 pixels down, i.e. to the original position... What do you want to do? Until I understand, I can not help ...

Answer 2

What kind of animation? You have already asked the question: how to make a timer animation, now it moves from top to bottom and shows up, where do the numbers themselves come from? the animation needs to be linked exactly to the callbacks of this library/script.