Simple Countdown Timer

In this tutorial, you will learn how to create a simple countdown timer from 10 to 1 using CSS animation. The span's before pseudo element content is used to store each number. Watch the video below for a detailed tutorial.

HTML

<body>
  <h1><span></span></h1>
</body>

CSS

body {
  margin: 0;
  background-color: #2e3537;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

span:before {
  content: '';
  font-family: 'Arial', sans-serif;
  font-size: 5em;
  color: white;
  animation: count 10s forwards;
}

@keyframes  count {
  0% {
    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: '';
  }
}