CSS3はアニメーション効果を実現するためにvar()とcalc()関数を使用する。

<セクション>
    <div class="読み込み中">
      <div class="text"></div>
      <div class="時計" style="--i:1;"></div>
      <div class="時計" style="--i:2;"></div>
      <div class="clock" style="--i:3;"></div>
      <div class="時計" style="--i:4;"></div>
      <div class="clock" style="--i:5;"></div>
      <div class="clock" style="--i:6;"></div>
      <div class="clock" style="--i:7;"></div>
      <div class="clock" style="--i:8;"></div>
      <div class="clock" style="--i:9;"></div>
      <div class="clock" style="--i:10;"></div>
      <div class="clock" style="--i:11;"></div>
      <div class="clock" style="--i:12;"></div>
      <div class="clock" style="--i:13;"></div>
      <div class="clock" style="--i:14;"></div>
      <div class="clock" style="--i:15;"></div>
      <div class="clock" style="--i:16;"></div>
      <div class="clock" style="--i:17;"></div>
      <div class="clock" style="--i:18;"></div>
      <div class="clock" style="--i:19;"></div>
      <div class="clock" style="--i:20;"></div>
    </div>
  </セクション>

*{
      マージン: 0;
      パディング: 0;
      ボックスのサイズ: 境界線ボックス;
    }
  セクション{
    ディスプレイ:フレックス;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
    最小高さ: 100vh;
    背景: -webkit-linear-gradient(左上、ピンク、オレンジ);
  }

.読み込み中{
    位置: 相対的;
    幅: 250ピクセル;
    高さ: 250px;
  }

.loading .text::after{
    コンテンツ: "読み込み中";
    位置: 絶対;
    上位: 50%;
    左: 50%;
    変換: translate(-50%, -50%);
    色: #000;
    フォントサイズ: 24px;
    フォントの太さ:600;
    高さ: 66px;
    幅: 130ピクセル;
    テキスト配置: 中央;
    行の高さ: 66px;
    遷移: すべて .5 秒;
    文字間隔: 2px;
  }
.loading .clock{
    位置:絶対;
    左: 50%;
    高さ: 25px;
    幅: 8px;
    背景色:赤;
    変換: rotate(calc(18deg * var(--i)));
    変換の原点: 0 125px;
    アニメーション: クロック 1.2 秒 線形無限;
    アニメーション遅延: calc(0.06s * var(--i));
  }

@keyframes 時計 {
    0%、50%{
      背景色:ピンク;
      ボックスシャドウ: なし;
    }
    50.1%、100%{
      背景色: 赤;
      ボックスシャドウ: 0 0 5px 赤、
                  0 0 10px 赤、
                  0 0 25px 赤、
                  0 0 40px 赤;
    }
  }

変換の原点: 0 125px;
    アニメーション: クロック 1.2 秒 線形無限;
    アニメーション遅延: calc(0.06s * var(--i));

.text:hover::after{ をロード中
    内容: "終了しました";
    変換: translate(-50%, -50%) translateY(-8px) scale(1.3);
    色: 赤;
  }
  .loading:hover .clock{
    アニメーション再生状態: 一時停止;
  }