CSSで時計＆ストップウォッチ

# はじめに
CSSだけでどこまでできるか。
ふと、衝撃を受けたCSSドラえもんとサラブレッドを思い出しました。

https://purecss3.net/doraemon/doraemon_css3.html

https://coliss.com/articles/build-websites/operation/css/clip-clop-clippity-clop.html

何か作ってみたくなり、時計とストップウォッチを作ってみました。
実際に作ると色々と勉強になります。

# CSS時計

<p class="codepen" data-height="450" data-default-tab="result" data-slug-hash="zxOjvJQ" data-pen-title="Untitled" data-user="cjlsrdxi-the-builder" style="height: 450px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/cjlsrdxi-the-builder/pen/zxOjvJQ">
  Untitled</a> by masayasu_t (<a href="https://codepen.io/cjlsrdxi-the-builder">@cjlsrdxi-the-builder</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### ポイント

#### 文字
１．時計内の文字は選択させたくないので、contentで表記している。
２．アラビア数字であれば、下記のようにすると簡潔に書ける。
```css
.num span{
  counter-increment: num;
}
.num span::before{
  content: counter(num);
}
```

#### 針
```diff_css
.sec{
  height: 160px;
-  animation: tick 60s infinite steps(60, start);
+  animation: tick 60s infinite linear;
}
```
のようにすると秒針が滑らかに動く。


#### 初期設定
```javascript
const now = new Date();
document.querySelector('.sec').style.animationDelay = (- now.getSeconds()) + 's';
document.querySelector('.min').style.animationDelay = (- (now.getMinutes() * 60 + now.getSeconds())) + 's';
document.querySelector('.hour').style.animationDelay = (- (now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds())) + 's';
```
CSSだけでなんとかしたかったのですが、画面表示時の現在時刻の設定だけはjavascriptで行いました。

# ストップウォッチ
<p class="codepen" data-height="360" data-default-tab="result" data-slug-hash="ogvPzMX" data-pen-title="Untitled" data-user="cjlsrdxi-the-builder" style="height: 360px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/cjlsrdxi-the-builder/pen/ogvPzMX">
  Untitled</a> by masayasu_t (<a href="https://codepen.io/cjlsrdxi-the-builder">@cjlsrdxi-the-builder</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>

### ポイント

#### デジタル文字
```css
@keyframes tick1 {0% {opacity: 1;} 10% {opacity: 0;} 20% {opacity: 0;} 30% {opacity: 0;} 40% {opacity: 1;} 50% {opacity: 1;} 60% {opacity: 1;} 70% {opacity: 0;} 80% {opacity: 1;} 90% {opacity: 1;} 100% {opacity: 1;}}
@keyframes tick2 {0% {opacity: 1;} 10% {opacity: 0;} 20% {opacity: 1;} 30% {opacity: 1;} 40% {opacity: 0;} 50% {opacity: 1;} 60% {opacity: 1;} 70% {opacity: 1;} 80% {opacity: 1;} 90% {opacity: 1;} 100% {opacity: 1;}}
@keyframes tick3 {0% {opacity: 1;} 10% {opacity: 1;} 20% {opacity: 1;} 30% {opacity: 1;} 40% {opacity: 1;} 50% {opacity: 0;} 60% {opacity: 0;} 70% {opacity: 1;} 80% {opacity: 1;} 90% {opacity: 1;} 100% {opacity: 1;}}
@keyframes tick4 {0% {opacity: 0;} 10% {opacity: 0;} 20% {opacity: 1;} 30% {opacity: 1;} 40% {opacity: 1;} 50% {opacity: 1;} 60% {opacity: 1;} 70% {opacity: 0;} 80% {opacity: 1;} 90% {opacity: 1;} 100% {opacity: 0;}}
@keyframes tick5 {0% {opacity: 1;} 10% {opacity: 0;} 20% {opacity: 1;} 30% {opacity: 0;} 40% {opacity: 0;} 50% {opacity: 0;} 60% {opacity: 1;} 70% {opacity: 0;} 80% {opacity: 1;} 90% {opacity: 0;} 100% {opacity: 1;}}
@keyframes tick6 {0% {opacity: 1;} 10% {opacity: 0;} 20% {opacity: 1;} 30% {opacity: 1;} 40% {opacity: 0;} 50% {opacity: 1;} 60% {opacity: 1;} 70% {opacity: 0;} 80% {opacity: 1;} 90% {opacity: 1;} 100% {opacity: 1;}}
@keyframes tick7 {0% {opacity: 1;} 10% {opacity: 1;} 20% {opacity: 0;} 30% {opacity: 1;} 40% {opacity: 1;} 50% {opacity: 1;} 60% {opacity: 1;} 70% {opacity: 1;} 80% {opacity: 1;} 90% {opacity: 1;} 100% {opacity: 1;}}
```
7つのdivの表示/非表示を、それぞれ切り替えて表現しています。

#### 開始、停止、リセット
```css
#start:checked~.watch .digital .num div div{animation-play-state: running;}
#stop:checked~.watch .digital .num div div{animation-play-state: paused;}
#reset:checked~.watch .digital .num div div{animation: none;}
```
ラジオボタンの選択によって、animationを切り替えています。