Pure CSS countdown animation

Question

I'm trying to do a pure HTML/CSS countdown animation but I'm struggling to make it work smoothly. For now I'm only covering minutes and seconds. Notice that I'm using animation-delay property for resetting my countdown to a certain initial time.

For now everything is working fine, except the digit corresponding to the x10 minutes which is not changing sync with the rest of the digits. Following I will paste my code and two codepens, a first normal version with the correct timings for a normal behaviour and another one 10 times faster so you can quickly appreciate the problem.

• https://codepen.io/ecazorla/pen/WKdZpQ (normal version)
• https://codepen.io/ecazorla/pen/bjapeN (10 times faster version)

@keyframes tick6 {
        0%      { margin-top: 0; }
        16%     { margin-top: -2rem;  }
        33%     { margin-top: -4rem;  }
        50%     { margin-top: -6rem;  }
        66%     { margin-top: -8rem;  }
        83%     { margin-top: -10rem;  }
        100%    { margin-top: -12rem;  }
    }

    @keyframes tick10 {
        0%      { margin-top: 0; }
        10%     { margin-top: -2rem;  }
        20%     { margin-top: -4rem;  }
        30%     { margin-top: -6rem;  }
        40%     { margin-top: -8rem;  }
        50%     { margin-top: -10rem;  }
        60%     { margin-top: -12rem;  }
        70%     { margin-top: -14rem;  }
        80%     { margin-top: -16rem;  }
        90%     { margin-top: -18rem;  }
        100%    { margin-top: -20rem;  }
    }
    
body {
  background-color: black;
}

.container {
  background-color: white;
}

.digit {
  display: inline-block;
  height: 2rem;
  overflow: hidden;
  width: 1ch;
}

.digit span {
  display: block;
  height: 2rem;
  width: 100%;
}

.minutes-digit-one {
  animation: tick6 3600s step-end;
  animation-iteration-count: infinite;
  animation-delay: -540s;
}

.minutes-digit-two {
  animation: tick10 600s step-end;
  animation-iteration-count: infinite;
  animation-delay: -540s;
}

.seconds-digit-one {
  animation: tick6 60s step-end;
  animation-iteration-count: infinite;
  animation-delay: -540s;
}

.seconds-digit-two {
  animation: tick10 10s;
  animation-iteration-count: infinite;
  animation-delay: -540s;
}

<div class="container">
  <div class="digit">
    <span class="minutes-digit-one">5</span>
    <span>4</span>
    <span>3</span>
    <span>2</span>
    <span>1</span>
    <span>0</span>
    <span>5</span>
  </div>
  <div class="digit">
    <span class="minutes-digit-two">9</span>
    <span>8</span>
    <span>7</span>
    <span>6</span>
    <span>5</span>
    <span>4</span>
    <span>3</span>
    <span>2</span>
    <span>1</span>
    <span>0</span>
    <span>9</span>
  </div>
  <div class="digit">
    <span>:</span>
  </div>
  <div class="digit">
    <span class="seconds-digit-one">5</span>
    <span>4</span>
    <span>3</span>
    <span>2</span>
    <span>1</span>
    <span>0</span>
    <span>5</span>
  </div>
  <div class="digit">
    <span class="seconds-digit-two">9</span>
    <span>8</span>
    <span>7</span>
    <span>6</span>
    <span>5</span>
    <span>4</span>
    <span>3</span>
    <span>2</span>
    <span>1</span>
    <span>0</span>
    <span>9</span>
  </div>
</div>

Sapers

Answer 1

This is due to the percentage values of the keyframes. You are using 16% while it should be 16.6667% (100/6) to be more exact and accurate, same thing with the others values.

When using 360s or 3600s as a duration you will have a clear difference between 16% and 16.6667% thus the state will change earlier and you will have the synchronisation issue. You may not notice this when using 6s as duration with the seconds.

@keyframes tick6 {  
    0%          { margin-top: 0; }      /* 0*(100/6) */
    16.6667%    { margin-top: -2rem;  } /* 1*(100/6) */
    33.3333%    { margin-top: -4rem;  } /* 2*(100/6) */
    50%         { margin-top: -6rem;  } /* 3*(100/6) */
    66.6667%    { margin-top: -8rem;  } /* 4*(100/6) */
    83.3333%    { margin-top: -10rem; } /* 5*(100/6) */
    100%        { margin-top: -12rem; } /* 6*(100/6) */
}

@keyframes tick10 {
    0%      { margin-top: 0; }
    10%     { margin-top: -2rem;  }
    20%     { margin-top: -4rem;  }
    30%     { margin-top: -6rem;  }
    40%     { margin-top: -8rem;  }
    50%     { margin-top: -10rem;  }
    60%     { margin-top: -12rem;  }
    70%     { margin-top: -14rem;  }
    80%     { margin-top: -16rem;  }
    90%     { margin-top: -18rem;  }
    100%    { margin-top: -20rem;  }
}

body {
  background-color: black;
}

.container {
  background-color: white;
}

.digit {
  display: inline-block;
  height: 2rem;
  overflow: hidden;
  width: 1ch;
}

.digit span {
  display: block;
  height: 2rem;
  width: 100%;
}

.minutes-digit-one {
  animation: tick6 360s infinite step-end;
  /*animation-delay: -54s;*/
}

.minutes-digit-two {
  animation: tick10 60s infinite step-end;
  /*animation-delay: -54s;*/
}

.seconds-digit-one {
  animation: tick6 6s infinite step-end;
  /*animation-delay: -54s;*/
}

.seconds-digit-two {
  animation: tick10 1s infinite step-end;
}

<div class="container">
  <div class="digit">
    <span class="minutes-digit-one">5</span>
    <span>4</span>
    <span>3</span>
    <span>2</span>
    <span>1</span>
    <span>0</span>
    <span>5</span>
  </div>
  <div class="digit">
    <span class="minutes-digit-two">9</span>
    <span>8</span>
    <span>7</span>
    <span>6</span>
    <span>5</span>
    <span>4</span>
    <span>3</span>
    <span>2</span>
    <span>1</span>
    <span>0</span>
    <span>9</span>
  </div>
  <div class="digit">
    <span>:</span>
  </div>
  <div class="digit">
    <span class="seconds-digit-one">5</span>
    <span>4</span>
    <span>3</span>
    <span>2</span>
    <span>1</span>
    <span>0</span>
    <span>5</span>
  </div>
  <div class="digit">
    <span class="seconds-digit-two">9</span>
    <span>8</span>
    <span>7</span>
    <span>6</span>
    <span>5</span>
    <span>4</span>
    <span>3</span>
    <span>2</span>
    <span>1</span>
    <span>0</span>
    <span>9</span>
  </div>
</div>

Charity

And, to be totally clear, 16.6667 is technically off. Technically it's 16.6666(repeating indefinitely), but I'm not sure that difference would cause long-term discrepancies – Eusporangiate

@cale_b mathematically it's 16.6666 (repeating) and more exactly it's 100/6 like I described in the answer but in the real world 16.666...% is the same a 16.6667%, everything is approximated ;) and our perception won't figure out that small difference unless we are dealing with a very particular case involving more calculation – Charity

@cale_b also for this case we won't have long-term discrepancies since the duration is fixed as 360s so the cycle will repeat exactly each 360s. If it's good for the first one then it will be good for the second one and so on ... we may have issue if the duration is not exact and this may create discrepancies – Charity