CSS3 таймер с анимацией по ключевым кадрам

В этой статье я расскажу вам как построить таймер без использования Javascript (прибережем его для более серьезных дел). Изначально я хотел написать статью об анимированных медиа-запросов CSS3, но меня отвлекли размышления о том, как отобразить изменение ширины браузера, используя только CSS. С этой целью я наваял таймер с помощью CSS3.

Технологии, описанной в этой статье, можно найти множество применений. Для начала я объясню базовую разметку:

На дисплее должно быть три «колесика» с цифрами для каждого сегмента таймера, поэтому целесообразно использовать ряд списков HTML. Все списки будут перемещаться в соответствии с анимацией CSS3. Я объединил их тегом <div> и добавил id таймера.

<div class="timer">
  <ul class="timer-tens">
    <li>8<li>9<li>0<li>1<li>2<li>3<li>4<li>5<li>6<li>7<li>8<li>9
  </ul>
  <ul id=timer-ones>
    <li>9<li>0<li>1<li>2<li>3<li>4<li>5<li>6<li>7<li>8<li>9<li>0
  </ul>
</div>

Следует отметить, что цифры, расположенные выше и ниже центра колеса, всегда включены.

Перейдем к CSS. Очевидно, что нам нужно ограничить видимую область каждого списка. С этим отлично справится наш блок div:

.timer { display: inline-block; height: 3.6rem; overflow: hidden; }

Я применил свойство inline-block для div чтобы его ширина была такой же, контент внутри него, но ограничим его по высоте (height: 3.6rem). Давайте посмотрим на CSS код для счетчиков:

.timer ul {
    display: inline-block; 
    list-style-type: none; 
    width: 2rem; 
    padding-left: 0; 
    margin-top: 0;
    position: relative;
    top: -1.3rem; 
    line-height: 32px; 
}

Здесь все довольно просто. описанные свойства. в том числе и высота строки line-height будут взаимодействовать с общими правилами, описанными в теге body:

body {background: #ffffff; color: #9E005D; text-align: center; font-size: 32px; }

Благодаря этим двум значениям все цифры в обоих списках разделены вертикальными отступами одинакового размера. Так будет, пока мы не захотим переместить колесики в анимации:

@keyframes rollover {
     0% { top: -51px; }
    10% { top: -83px; }
    20% { top: -115px; }
    30% { top: -147px; }
    40% { top: -179px; }
    50% { top: -211px; } 
    60% { top: -243px; }
    70% { top: -275px; }
    80% { top: -307px; }
    90% { top: -339px; }
   100% { top: -371px; }
}

Отступы между цифрами означают, что каждый анимационный ряд будет начинаться и заканчиваться на одной и той же цифре, а каждая цифра всегда будет отображаться в центре колесика. Так будет продолжаться, пока нам не вздумается переместить счетчики в анимации:

Теперь о самом сложном: анимация колесиков. Я хотел, чтобы смена цифр происходила в виде резкого щелчка, поэтому я создал смягченную кривую и использовал ее для каждого этапа анимации:

#timer-ones {animation: rollover 10s cubic-bezier(1.000,0.005,0.995,0.090) infinite;}

Для второго счетчика мы используем те же настройки анимации, что и для первого, но длиться она будет в 10 раз дольше:

#timer-tens{animation: rollover 100s cubic-bezier(1.000,0.005,0.995,0.090) infinite;}

В принципе, это все, за исключением наложения градиента для div по альфа-маске на абсолютно спозиционированные изображения PNG для затенения колесиков.

Я не стал использовать анимацию для сотых долей секунды – вряд ли кто-нибудь стал бы висеть на странице так долго)))).