映画TENET風に逆さ文字を元に戻すようなCSSが作ってみたい

今回やりたいこと

映画TENETの予告編を見てたらやたら逆さ文字が使われてたので
ちょっとしたTENET風テロップアニメーションを作ってみたくなりました。

情報収集

CSSはよく使っているが、業務アプリにあまりanimationは使わなかったので調査
CSS3リファレンス transform:rotate()
【CSS3】@keyframes と animation 関連のまとめ
CSS 要素を回転させる方法
Animating with Clip-Path
なるほど、切り抜きの作業をアニメ化していくのね。

そして

codepen使ってちまちま作ってできたのがこちら

See the Pen TENET -Reverse the reverse character- by Kei Saito (@3S-Laboo) on CodePen.

## 軽く説明すると 逆さ文字は

/* 逆さTENETの表示 + アニメーション */
.tenet-reverse { 
  animation:5s close infinite; 
  animation-delay:.1s;
  transform: rotate(180deg); ←これ
}

transform:rotate()はタグ内の値を回転させるCSSスタイルです。
180degにより180度回転します。
アニメーションの処理は

/* 文字を非表示にするアニメーション */
@keyframes close {
  0%   {clip-path: inset(0); }←開始時は表示状態
  100% {clip-path: inset(0% 100% 0% 100%); }←終了時は右と左の長さが0
}
/* 文字を表示するアニメーション */
@keyframes open {
  0%   {clip-path: inset(0% 100% 0% 100%);}←開始時は右と左の長さが0
  100% {clip-path: inset(0);}←終了時は表示状態
}

こうすることで表示するときは中央から表示されるアニメーション、隠すときは端から隠れていくアニメーションが出来ました。
あとはこれを動かしたい要素に付与します。

/* 逆さ文字の表示 + アニメーション */
.tenet-reverse { 
  animation:5s close infinite; ←5秒間でcloseアニメーションの実行（infiniteで繰り返し実行）
  animation-delay:.1s; ←左記は開始時間を少し遅らせる
  transform: rotate(180deg);
}
/* 通常文字の表示 + アニメーション */
.tenet-nonreverse { 
  animation: 5s open infinite; ←5秒間でopenアニメーションの実行（infiniteで繰り返し実行）
  padding-top:2px;
}

途中、微調整にpaddingなんかを使っちゃったのでかなり適当になっちゃった。

今回はここまで。
ありがとうございました。