Guide on developing a CSS countdown timer

I recently came across an article discussing the creation of a CSS countdown timer. Intrigued by the concept, I decided to give it a try myself. However, my implementation seems flawed and the live demo link provided in the article is not working. Can someone help me identify the issue at hand?

.tens li:nth-of-type(1) {
  animation: digitcount 10s ease-in-out 0s 1;
}

.tens li:nth-of-type(2) {
  animation: tencount 60s ease-in-out 1s 1;
}

.tens li:nth-of-type(3) {
  animation: tencount 60s ease-in-out 11s 1;
}

.tens li:nth-of-type(4) {
  animation: tencount 60s ease-in-out 11s 1;
}

.tens li:nth-of-type(5) {
  animation: tencount 60s ease-in-out 11s 1;
}

.tens li:nth-of-type(6) {
  animation: tencount 60s ease-in-out 11s 1;
}

@keyframes tencount {
  0% {
    opacity: 1
  }
  16.6% {
    opacity: 1
  }
  16.7% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}

.digits li:nth-of-type(1) {
  animation: digitcount 10s ease-in-out 0s 6;
}

.digits li:nth-of-type(2) {
  animation: digitcount 10s ease-in-out 1s 6;
}

.digits li:nth-of-type(3) {
  animation: digitcount 10s ease-in-out 0s 6;
}

.digits li:nth-of-type(4) {
  animation: digitcount 10s ease-in-out 1s 6;
}

.digits li:nth-of-type(5) {
  animation: digitcount 10s ease-in-out 0s 6;
}

.digits li:nth-of-type(6) {
  animation: digitcount 10s ease-in-out 1s 6;
}

.digits li:nth-of-type(7) {
  animation: digitcount 10s ease-in-out 0s 6;
}

.digits li:nth-of-type(8) {
  animation: digitcount 10s ease-in-out 1s 6;
}

.digits li:nth-of-type(9) {
  animation: digitcount 10s ease-in-out 0s 6;
}

.digits li:nth-of-type(10) {
  animation: digitcount 10s ease-in-out 1s 6;
}

@keyframes digitcount {
  0% {
    opacity: 1
  }
  9.9% {
    opacity: 1
  }
  10% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}

.done li {
  animation: zero 1s ease-in-out 60s infinite;
}

@keyframes zero {
  0% {
    opacity: 1
  }
  90% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}
<div class="clock">
  <ol class="tens">
    <li>6</li>
    <li>5</li>
    <li>4</li>
    <li>3</li>
    <li>2</li>
    <li>1</li>
  </ol>
  <ol class="digits">
    <li>0</li>
    <li>9</li>
    <li>8</li>
    <li>7</li>
    <li>6</li>
    <li>5</li>
    <li>4</li>
    <li>3</li>
    <li>2</li>
    <li>1</li>
  </ol>
  <ol class="done">
    <li>0</li>
  </ol>
</div>

htmlcsscss-animations

Answer №1

If you're utilizing Firefox or Chrome, feel free to make use of the following code.
(These two browsers are equipped with the ability to modify content within CSS animations)

.tens, .digits, .colon, .minute-tens, .minute-digits {
  display: inline-block;
}
.minute-tens:before {
  content: '0';
}
.digits:before {
  content: '0';
}
.tens:before {
  content: '0';
}
.minute-digits:before {
  content: '0';
}

.digits:before {
  animation: digitcount 10s ease 0s 6;
}
.tens:before {
  animation: tencount1 10s ease 0s, tencount2 10s ease 10s, tencount3 10s ease 20s, tencount4 10s ease 30s, tencount5 10s ease 40s, tencount6 10s ease 50s;
}
.minute-digits:before {
  animation: minute-digitcount1 60s ease 0s;
}
@keyframes digitcount {
  10% { content: '9'; }
  20% { content: '8'; }
  30% { content: '7'; }
  40% { content: '6'; }
  50% { content: '5'; }
  60% { content: '4'; }
  70% { content: '3'; }
  80% { content: '2'; }
  90% { content: '1'; }
  100% { content: '0'; }
}
@-webkit-keyframes digitcount {
  10% { content: '9'; }
  20% { content: '8'; }
  30% { content: '7'; }
  40% { content: '6'; }
  50% { content: '5'; }
  60% { content: '4'; }
  70% { content: '3'; }
  80% { content: '2'; }
  90% { content: '1'; }
  100% { content: '0'; }
}
@keyframes tencount1 { 0%, 10% { content: '0'; } 10%, 100% { content: '5'; } }
@keyframes tencount2 { 0%, 10% { content: '5'; } 10%, 100% { content: '4'; } }
@keyframes tencount3 { 0%, 10% { content: '4'; } 10%, 100% { content: '3'; } }
@keyframes tencount4 { 0%, 10% { content: '3'; } 10%, 100% { content: '2'; } }
@keyframes tencount5 { 0%, 10% { content: '2'; } 10%, 100% { content: '1'; } }
@keyframes tencount6 { 0%, 10% { content: '1'; } 10%, 100% { content: '0'; } }

@-webkit-keyframes tencount1 { 0%, 10% { content: '0'; } 10%, 100% { content: '5'; } }
@-webkit-keyframes tencount2 { 0%, 10% { content: '5'; } 10%, 100% { content: '4'; } }
@-webkit-keyframes tencount3 { 0%, 10% { content: '4'; } 10%, 100% { content: '3'; } }
@-webkit-keyframes tencount4 { 0%, 10% { content: '3'; } 10%, 100% { content: '2'; } }
@-webkit-keyframes tencount5 { 0%, 10% { content: '2'; } 10%, 100% { content: '1'; } }
@-webkit-keyframes tencount6 { 0%, 10% { content: '1'; } 10%, 100% { content: '0'; } }

@keyframes minute-digitcount1 { 0%, 1.7% { content: '1'; } 1.7%, 100% { content: '0'; } }
@-webkit-keyframes minute-digitcount1 { 0%, 1.7% { content: '1'; } 1.7%, 100% { content: '0'; } }
<div class="clock">
  <div class="minute-tens"></div>
  <div class="minute-digits"></div>
  <div class="colon"> : </div>
  <div class="tens"></div>
  <div class="digits"></div>
</div>

If not, here is an alternative code that can be utilized across all web browsers.

ol.tens, .digits, .first {
  list-style-type: none;
  margin:0;
  padding:3px;
  position: relative;
  display: inline-block;
}
ol.first {
  margin-right: 12px;
}
.tens li, .digits li, .first li {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
}
.first li:nth-of-type(2) {
  animation: minutecount 60s ease-in-out 0s 1;
}

.tens li:nth-of-type(1) {
  animation: tenscount 60s ease-in-out 51s 1;
}
/* Other keyframe animations definitions go here */

<div class="clock">
  <ol class="first">
    <li>00:</li>
    <li>01:</li>
  </ol>
  <ol class="tens">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>0</li>
 </ol>
 <ol class="digits">
 /* More list items for digits */
 </div>

Answer №2

.timer {
  
}
.timer:before {
  content: attr(data-counter);
  animation: countdown-animation 10s steps(1, start) forwards;
}

@keyframes countdown-animation {
  1% {
    content: '10';
  }
  10% {
    content: '9';
  }
  20% {
    content: '8';
  }
  30% {
    content: '7';
  }
  40% {
    content: '6';
  }
  50% {
    content: '5';
  }
  60% {
    content: '4';
  }
  70% {
    content: '3';
  }
  80% {
    content: '2';
  }
  90% {
    content: '1';
  }
  100% {
    content: 'BINGO!';
  }
}
<span class="timer" data-counter="10"></span>

Answer №3

To solve this problem, you will need to follow these mathematical steps.

<div class="timer">
  <ol class="units">
    <li>5</li>
    <li>4</li>
    <li>3</li>
    <li>2</li>
    <li>1</li>
    <li>0</li>
 </ol>
 <ol class="numbers">
    <li>9</li>
    <li>8</li>
    <li>7</li>
    <li>6</li>
    <li>5</li>
    <li>4</li>
    <li>3</li>
    <li>2</li>
    <li>1</li>
    <li>0</li>
 </ol>
</div>
<style>
ol.units, .numbers{
  list-style-type: none;
  padding: 10px;
  margin:0;
  position: relative;
}
.units li, .numbers li{
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
}

.units li:nth-of-type(1) {
  animation: unitcount 60s ease-in-out 60s 1;
}
.units li:nth-of-type(2) {
  animation: unitcount 60s ease-in-out 50s 1;
}
.units li:nth-of-type(3) {
  animation: unitcount 60s ease-in-out 40s 1;
}

.units li:nth-of-type(4) {
  animation: unitcount 60s ease-in-out 30s 1;
}

.units li:nth-of-type(5) {
  animation: unitcount 60s ease-in-out 20s 1;
}

.units li:nth-of-type(6) {
  animation: unitcount 60s ease-in-out 10s 1;
}


.numbers li:nth-of-type(1) {
  animation: numbercount 10s ease-in-out 10s 6;
}

.numbers li:nth-of-type(2) {
  animation: numbercount 10s ease-in-out 9s 6;
}

.numbers li:nth-of-type(3) {
  animation: numbercount 10s ease-in-out 8s 6;
}

.numbers li:nth-of-type(4) {
  animation: numbercount 10s ease-in-out 7s 6;
}

.numbers li:nth-of-type(5) {
  animation: numbercount 10s ease-in-out 6s 6;
}

.numbers li:nth-of-type(6) {
  animation: numbercount 10s ease-in-out 5s 6;
}

.numbers li:nth-of-type(7) {
  animation: numbercount 10s ease-in-out 4s 6;
}

.numbers li:nth-of-type(8) {
  animation: numbercount 10s ease-in-out 3s 6;
}

.numbers li:nth-of-type(9) {
  animation: numbercount 10s ease-in-out 2s 6;
}

.numbers li:nth-of-type(10) {
  animation: numbercount 10s ease-in-out 1s 6;
}

@keyframes numbercount {
  0% {
    opacity: 1
  }
  9.9% {
    opacity: 1
  }
  10% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}

@keyframes unitcount {
  0% {
    opacity: 1
  }
  0.9% {
    opacity: 1
  }
  2% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}

</style>

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

Struggling to get image properly aligned using touch gestures

Currently, I am struggling with the task of centering my image based on the touch input that will drag it. For example, if the user touches the top right corner of the image, I want the image to automatically move so that its center aligns with that touch ...

javascripthtmlcss

Submission form not functional at this time

I'm having trouble with this form submission, can someone offer assistance? My issue involves using bootstrap css to submit a simple form. I'm facing a small problem that I can't seem to figure out, any help would be appreciated. <di ...

phpjqueryhtmlforms

"Enhancing Your List Design: Customizing CSS for Hover Effects on Images

I'm currently working on a CSS/HTML list that utilizes an image as the background and changes to a different image when hovered over. However, I've encountered an issue where the hover image is not aligning properly, leaving a noticeable gap. T ...

htmlcss

Angular 6 provides a regular expression that specifically targets the removal of any characters that are not numbers and enforces the allowance of

I have tried various solutions to restrict input in an Angular material input box, but none seem to be effective for my specific case. I need the input field to only allow numbers and a decimal point. Any other characters should be automatically removed as ...

javascripthtmlangulartypescriptangular-material

What causes the top and left border to appear as separate lines instead of a single line?

div { border: 1px solid red; } .one { height: 20px; width: 20px; } .two { height: 30px; width: 30px; } <div class="one"> <div class="two"> </div> </div> Within the structure of a DOM tree, the .two div is classified a ...

htmlcss

incorporating a personalized HTMLElement using Typescript

Hey there! I'm fairly new to using Angular and could use some help. I'm trying to insert a custom HTML element onto a page when a button is clicked, but I'm struggling to figure it out. Here are my HTML and TypeScript files: TypeScript Fil ...

htmlangulartypescript

What steps can be taken to solve the JavaScript error provided below?

My objective is to create a new variable called theRightSide that points to the right side div. var theRightSide = document.getElementById("rightSide"); Once all the images are added to the leftSide div, I need to use cloneNode(true) to copy the left ...

javascripthtmlcssweb

Require the implementation of seamless scrolling when clicking on an anchor tag with a specific ID, as opposed to the abrupt jumping to the corresponding

<div id="slider"> <div id="pro1"></div> <div id="pro2"></div> <div id="pro3"></div> </div> <div id="thumb"> <a href="#pro1"> <img id="tpro1" src="projects/tpro5.jpg" style="hei ...

javascriptjquerycsshtml

Ways to retrieve the path of a button found within table cells

https://i.stack.imgur.com/pUYHZ.jpgI'm currently working on a table where I've created a button that's being used in various rows and tables based on certain conditions. There's a specific scenario where I need to display the button for ...

javascripthtml

Creating visualizations by overlaying shapes onto images using specified coordinates in jQuery

I have a web application in development that integrates with the skybiometry API. Their demo showcases a fantastic user feedback system displayed after facial recognition, similar to the one shown below. I am currently working on implementing a similar fe ...

javascriptjqueryhtmlshapes

Apply a class to each consecutive element following the current one until reaching a child element with a

My goal is to apply a "bg-info" class using jQuery to all rows (tr) that come after odd rows with a child element of "test". The "bg-info" class should be removed when a row with a child element of "test" is encountered, and then re-applied when the next o ...

javascriptjqueryhtmlcss

Achieving dynamic height in a parent div with a sticky header using mui-datatables

Here are the settings I've configured for my mui-datatables: const options = { responsive: "standard", pagination: false, tableBodyHeight: '80vh', }; return ( <MUIDataTable title={"ACME Employee ...

javascriptcssreactjsdatatablesmaterial-ui

Follow each step to see the final outcome

I have a Step-by-step form that includes a simple calculation. To calculate section 08, I have a function that subtracts liabilities from assets and displays the result as net equity. $(document).ready(function () { // Calculate section 08 ...

javascriptjqueryhtmlfunction

Deactivate the attribute in the media query

I made some website with pure html/css. I defined overflow-y: scroll to some element when browser is full screen. But when screen's width is less than 400px, I want to disable that. (like, overflow-y: none. But overflow-y doesn't have none) Is ...

css

What is preventing the items inside the <ul> element from displaying?

Struggling to grasp pagination, I can't figure out why the contents of "li" under the "ul" disappear while the "ul" container continues to display despite specifying in the JavaScript that only 6 should be visible on the page. The "ul" and "li" elemen ...

javascriptphpjqueryhtmlcss

Troubleshooting Problems with a Dynamic Menu

Hello, I have successfully implemented a responsive menu system on my website. However, I am now looking to rearrange the URLs in a different way. Please refer to my dropdown menu example here: http://jsfiddle.net/Et2HB/ What I am trying to achieve is to ...

jquerycsshtmlresponsive-design

Vue - Display components next to sidebar

Having an issue with the vue-sidebar-menu. The sidebar is appearing over the components instead of beside them. Here is a screenshot of the problem: https://i.sstatic.net/cVgI6.jpg <template> <div id="app"> <sidebar-menu :menu="menu" ...

javascripthtmlcssvue.js

Steps to Implement Dropdown with Multiple Selection in ReactJS

Recently, I've started exploring React and now I'm eager to create a customized select component similar to the one shown in this image: https://i.sstatic.net/D2IDC.png I've successfully created a basic select element like this: <select ...

javascripthtmlcssreactjs

Error encountered in PHP due to a spacing issue in the GET

<?php $current_subject = $_GET['subject_id']; $current_content = $_GET['note_id']; echo "<form method=\"post\" action=mainpage.php?subject_id=".$current_subject."&note_id=".$current_content.">"; ?> <in ...

phphtmlget

Using the <li dir="..."> tag can cause list indicators to break

Is there a method to utilize dir tags for <li> elements without disrupting the list indicators? Logically, they should all align on the same side and RTL <li> elements in an otherwise LTR document should either be left-aligned if it's only ...

htmlcsshtml-listsdirection