0

I saw this article on how to create a CSS countdown timer. It seemed interesting to me, so I tried to follow the instructions and get it to work. Here's what I came up with. It doesn't look right and unfortunately the live demo link is broken. What am I doing wrong?

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

Improve this question

3 Answers 3

Reset to default
2

You can use this code if you're using Firefox or Chrome.
(These are the only browsers that support changing content in 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>

Otherwise, here is some code for use in any browser.

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;
}
.tens li:nth-of-type(2) {
  animation: tenscount 60s ease-in-out 41s 1;
}
.tens li:nth-of-type(3) {
  animation: tenscount 60s ease-in-out 31s 1;
}
.tens li:nth-of-type(4) {
  animation: tenscount 60s ease-in-out 21s 1;
}
.tens li:nth-of-type(5) {
  animation: tenscount 60s ease-in-out 11s 1;
}
.tens li:nth-of-type(6) {
  animation: tenscount 60s ease-in-out 1s 1;
}
.tens li:nth-of-type(7) {
  animation: tenscount 60s ease-in-out 0s 1;
}


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

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

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

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

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

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

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

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

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

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

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

@keyframes tenscount {
  0% {
    opacity: 1
  }
  0.9% {
    opacity: 1
  }
  2% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}
@keyframes minutecount {
  0% { opacity: 1; }
  2.8% { opacity: 1; }
  2.9% { opacity: 0; }
  100% { opacity: 0; }
}
<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">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>0</li>
 </ol>
</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Thanks for the answer, but as mentioned in my question title and body I'm looking for a CSS-only approach!
@Mike Ok, I'll remove the JS example. How's the CSS only example though?
No, it doesn't.
@Mike Are you using mobile safari?
No, Safari 10 on a desktop computer.
|
2 

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

@keyframes countdown {
  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="clock" data-counter="10"></span>

Improve this answer

2 Comments

Add cross browser prefixes. I just made a quick example.
The animation property is supported in Edge and Safari, so they don't need prefixes.
0

You just need to do some math and here it is.

<div class="clock">
  <ol class="tens">
    <li>5</li>
    <li>4</li>
    <li>3</li>
    <li>2</li>
    <li>1</li>
    <li>0</li>
 </ol>
 <ol class="digits">
    <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.tens, .digits{
  list-style-type: none;
  padding: 10px;
  margin:0;
  position: relative;
}
.tens li, .digits li{
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
}

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

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

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

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


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

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

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

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

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

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

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

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

.digits li:nth-of-type(9) {
  animation: digitcount 10s ease-in-out 2s 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
  }
}

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

</style>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.