CSS-only countdown animation

I've been experimenting with a pure HTML/CSS countdown animation, but I'm facing challenges in getting it to run smoothly. Currently, I'm focusing on minutes and seconds only. One issue I encountered is that the digit representing tens of minutes is not transitioning synchronously with the other digits.

Below you'll find my code along with two CodePens - one showcasing the normal version with correct timings for regular behavior, and another running ten times faster so you can quickly identify the discrepancy.

@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>

Answer №1

The issue stems from the percentage values specified in the keyframes. Instead of using 16%, you should use 16.6667% (100/6) for greater precision and accuracy. The same applies to the other values.

When a duration of 360s or 3600s is used, the discrepancy between 16% and 16.6667% becomes more pronounced, leading to synchronization issues as the state changes prematurely. This may not be easily noticeable with a duration of 6s due to the shorter duration.

@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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The functionality for selecting text in multiple dropdown menus using the .on method is currently limited to the first dropdown

Having trouble selecting an li element from a Bootstrap dropdown and displaying it in the dropdown box? I'm facing an issue where only the text from the first dropdown changes and the event for the second dropdown doesn't work. <div class="dr ...

Choose an element by its specific data attribute

I have come across this html code and I am attempting to assign a new class to it using the data attribute: <p class="form-row form-row-wide" data-child-field="child_has_jacket"> </p> Even after trying with jQuery : jQuery( ...

Is it possible to use React and Material-UI to make a paper element extend to full width beyond the boundaries of a Container?

Assuming I have the following code snippet: <Container maxWidth='lg'> <Grid container spacing={3}> <Grid item xs={12} md={6} > <Image src="/img/undraw_programming_2svr.png" color='transparent' ...

Show the chosen item from a dropdown menu using Bootstrap

Here is the HTML code that I am working with: <!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="h ...

How can I showcase an image using Angular?

Recently, I've started working with Angular and I'm trying to display images using assets. I have a service that looks like this: const IMAGES = [ {"id":1, "category": "boats", "caption": "View from the boat", "url":"assets/img/boat_01.jpeg"}, ...

Issues with jKit Pagination (Controlling Size by Height)

I'm currently utilizing the jkit paginate feature to limit the number of items by height, with the setting at 910 pixels. Everything works fine when there is enough content to exceed this limit and create a second page. However, if the content falls ...

Can a webpage be sent to a particular Chromecast device without using the extension through programming?

My organization has strategically placed multiple Chromecasts across our facility, each dedicated to displaying a different webpage based on its location. Within my database, I maintain a record of the Chromecast names and their corresponding URLs. These d ...

Creating an HTML dynamic table with fixed height to prevent expanding when adding text

I have a dynamic table with fixed width and height. By using a random function, I determine the number of cells (ranging from 3x3 to 7x7) in the table. The table renders correctly, but when clicking on a cell to write a letter, the row expands in height. H ...

Ways to ensure a <div> element adjusts its height based on inner content dimensions

When using buttons in a chatbot that have text which changes based on selected options, I've encountered an issue where the text length sometimes exceeds the button's space. I'm looking for a way to make the containing div automatically adj ...

How can I make <p> elements change color when scrolling?

My Goal I aim to bring attention to the <p> element as the user scrolls on the page. Initially, the opacity is set to 0.3, but I want it to change to 1 gradually as the user scrolls down. My Attempt window.onscroll = function {scrHL}; fu ...

Develop an XML document that includes CSS and DTD seamlessly incorporated

Could someone please provide me with a short code example of an XML file that includes both a DTD and CSS styles all in one file? Just need one element as an example. I'm new to XML and can't seem to find any examples with both XML and CSS comb ...

What is the best way to transfer form input data from a child component to the parent component in React?

Recently delving into the world of React, I decided to experiment with forms. My project idea was straightforward - create a form component with input fields that, upon clicking submit, would pass the input values to the parent component ('App') ...

Dynamic CSS class alteration on scrolling using Vue.js

I am currently in the process of developing a web application using vueJs and bootstrap. I am interested in figuring out how to dynamically change the CSS class of an element based on scrolling behavior. Is there a vue-specific method that can achieve this ...

Trouble with search box images on Internet Explorer causing confusion

Here is the searchbox image displayed: With this code and css styling: #searchcontainer { margin: 40px 0 0 0; } .search { float: right; margin: 0; padding: 0; height: 21px; width: 310px; } .search input, .search button { mar ...

Artistic Canvas: Selected Image

I am trying to determine if the user has clicked on an image drawn in a canvas element. Despite clicking on the image, nothing seems to be happening. The alert function is not being triggered and the last condition in the code never evaluates to true. An ...

Having difficulty selecting a cloned div using jQuery

I am in the process of creating a dynamic menu that switches out sub-menus. <nav id="main-menu"> <div id="categories"> <a id="snacks" class="categ">Snacks &amp; Sweets</a> <a id="pantry" class="categ"> ...

To collapse a div in an HTML Angular environment, the button must be clicked twice

A series of divs in my code are currently grouped together with expand and collapse functionality. It works well, except for the fact that I have to click a button twice in order to open another div. Initially, the first click only collapses the first div. ...

Exploring Font-Awesome 5: Using CSS Pseudo-elements to Mirror or Rotate Icons

I am utilizing CSS pseudo elements to display icons (jsfiddle) body { font-family: Arial; font-size: 13px; } a { text-decoration: none; color: #515151; } a:before { font-family: "Font Awesome 5 Free"; content: "\f07a"; di ...

Reorganizing content under an image as the browser is resized by implementing a media query

In the footer section of my document, I have text positioned next to an image (floated to the right). However, when I resize my browser to a minimum width of 768px, both the text and image lose alignment. My goal is to centralize both elements with the ima ...

I am looking to transmit information from flask to React and dynamically generate HTML content based on it

index.py @app.route('/visuals', methods=["GET", "POST"]) def visuals(): global visclass return render_template('visframe.html', images=visclass.get_visuals()) visframe.html <div id='gallery'></div> { ...