CSS カウントダウンを表現

JSを使わずにカウントダウンを表現してみた。

html

<div class="nums">
  <span>0</span>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>
</div>

CSS

.nums{
  position: relative;
  text-align: center;
  font-size: 5em;
  width: 1em;
  height: 1.5em;
  overflow: hidden;
}

.nums span{
  position: relative;
  bottom: 0;

  /* カウントダウン */
  animation: CountDown 9s linear;
}

@keyframes CountDown{
  from{
    bottom: 13.5em; /* カウントダウン開始数値 * height(1.5em) */ 
  }

  to{
    bottom: 0;
  }
}