今回やりたいこと
映画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なんかを使っちゃったのでかなり適当になっちゃった。
今回はここまで。
ありがとうございました。