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

2020年09月02日

CSS CSS3 codepen

今回やりたいこと

映画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なんかを使っちゃったのでかなり適当になっちゃった。

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


SaitoSystemService

埼玉在住のフリーランスSEです。 技術ブログや作品をここで紹介していきます。 よろしくお願いします。

Written by 齋藤 渓
埼玉在住のフリーランスSEです。技術ブログや作品をここで紹介していきます。よろしくお願いします。
Contact:
© 2020, 齋藤システムサービス by Gatsby