htmlとcssを使ってカウントダウン

Question

htmlをつかってカウントダウンの画面を作成したいとかんがえています

内容としては、5秒カウントダウンして
０秒になったら消えるというプログラムを組みたいと思ってます

今書いているのでは実行できないので、教えてください

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

Answer 1

丸投げ感満載ですが、サンプルです。

参考

<div class="nums">
  <span>　</span>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
</div>

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

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

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

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

  to{
    bottom: 0;
  }
}