Как сделать такой таймер обратного отсчета?

Для создания таймера обратного отсчета в CSS можно использовать различные подходы и техники. Одним из самых популярных способов является комбинированное использование CSS и JavaScript. В этом ответе я расскажу о создании простого таймера обратного отсчета с использованием только CSS и HTML, без использования JavaScript.

1. Сначала создаем HTML-структуру для таймера. Нам понадобятся три HTML-элемента: обертка для таймера, элементы для отображения цифр минут и секунд.

<div class="timer-wrapper">
  <div class="timer">
    <div class="digit" id="minutes">00</div>
    <div class="digit">:</div>
    <div class="digit" id="seconds">00</div>
  </div>
</div>

2. Далее необходимо применить стили к нашей HTML-структуре. Мы будем использовать CSS-анимацию и ключевые кадры для создания эффекта обратного отсчета.

.timer-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.timer {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5rem;
}

.digit {
  padding: 0 0.5rem;
}

@keyframes countdown {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.75);
  }
}

.timer-wrapper .digit {
  animation: countdown 1s infinite;
}

#minutes {
  animation-delay: 0s;
}

#seconds {
  animation-delay: 0.5s;
}

3. Теперь к элементам минут и секунд нужно присвоить их значение. Для этого можно использовать атрибуты данных (data-attributes) в HTML-разметке.

<div class="timer-wrapper">
  <div class="timer">
    <div class="digit" data-time="01" id="minutes">01</div>
    <div class="digit">:</div>
    <div class="digit" data-time="59" id="seconds">59</div>
  </div>
</div>

4. Для того чтобы таймер обратного отсчета работал, необходимо добавить анимацию при переключении значений в CSS. Мы будем использовать CSS-переменные и вероятность того, что время уменьшится с каждым «кадром» (цифрой), чтобы создать эффект обратного отсчета.

@keyframes countdown {
  0% {
    transform: scale(1);
    --time: attr(data-time);
  }
  100% {
    transform: scale(0.75);
    --time: calc(var(--time) - 1);
  }
}

#minutes::after,
#seconds::after {
  content: var(--time);
}

После применения всех этих шагов, у вас будет простой таймер обратного отсчета, который будет уменьшать значения минут и секунд до 00:00. Этот таймер будет анимированным и будет использовать только CSS и HTML, без необходимости в JavaScript.