See the Pen The mount by keisuke Takahashi (@ksksoft) on CodePen.
アニメを考える
本物のパラマウントのロゴをYouTubeなどで見ながら、どういうアニメにするのかを考えました。年代ごとに色々とバージョンがあり、最新のやつはピクサーが作ったCGアニメらしいです。
CSSアニメにするにあたっては、印象的な要素を抽出して、以下のポイントを表現に絞りこみました。
- 星が飛んできて円状に広がる
- 白黒からカラーに変える表現を加えて、ロゴの持つ歴史を表現する
また、今回は、以下のこと切り捨てました。
- 空に浮かぶ空の雲の表現も面白いが、星のアニメに注目してもらうために描かない
- 1つのdivだけで作ることも可能だろうが、その技術的なチャレンジはしない
- 星をcssで描画することも可能だが、シンプルに星の絵文字（⭐️）を使う。
- 22個の星は22個のdivで描画しちゃう。
アニメの構成の工夫
ひとつながりのアニメーションを複数に分ける工夫をすると、アニメを作成しやすくなります。
今回のアニメのポイントは、一番複雑な動きになる星のアニメを、手前から奥へ飛んでいくアニメと、円形に広がるアニメに分けたところです。
今回の作品のDOM要素・描画された絵・アニメーションの関係は以下のようになっています。
| DOM要素 | 描画している絵 | アニメ |
|---|---|---|
| div.screen | スクリーン | 白黒からカラーへ |
| div.screen::before | 中央の高い山 | ズームイン1 |
| div.screen::after | 手前の低い山 | ズームイン2 |
| div.screen > div | 星のコンテナ | 手前左上から高い山の頂上へ星を飛ばす |
| div.screen > div::before | 星 | 円形に広がる星 |
| div.screen > h1 | タイトル | ふわっと表示 |
星をdiv.screen > divに描かずに、その::beforeに描くとこで入れ子にしているのがミソです。入れ子の要素のそれぞれをアニメさせると、一見複雑な指定も、シンプルに書くことができます。
星のコンテナのアニメの解説
手前から奥への星の移動にはtransform-styleとperspectiveプロパティを使います。これらは3Dにしたい要素の親要素に指定します。その直下の子要素のtransformの振る舞いが3Dになると、rotateXやrotateYで変形したときにパースがつくようになり、translateZで前後=奥行き方向に移動できるようになります。
perspective: 500px;を指定して、その子要素をtranslateZ(499px)にすると、画面の手前ギリギリまで近づいて巨大に表示されます。translateZ(500px)にすると、仮想的な視点の位置と一致して、要素は見えなくなります。500px以上になると、仮想視点よりも後ろに行ってしまい、見えなくなります。
星のコンテナのアニメでは、translate3d(-2000%,-800%,700px)からtranslate3d(0,0,0px)に変化させています。translateの移動量に%を指定したときの基準になる大きさは、その要素自体の元々の大きさなので、スタート位置は星の大きさの幅x20個分左、高さの8個分上、仮想視点の500pxより200px後ろからになります。
あとは22個の星のコンテナのanimation-delayを順番にずらしてあげれば、次々と星が飛んでくるアニメになります。
円形に広がる星のアニメの解説
星が円形に広がるアニメは、扇を広げるイメージで実装。星のコンテナのdivの位置はすべて同じ位置にあって重なっていて、星自体はその中に擬似要素で作成。transform-origin:center bottom;にして、下中央を扇の要にします。
擬似要素のアニメーションでkeyframe 0%の設定をtransform:rotate(320deg) translate(0px, 5.5em)として半径の分だけ扇の要から距離をとってから右に回しておき、100%でrotate(43deg) translate(0px, 5.5em)に変化させています。translateは同じなので、rotateだけアニメしてしているように見えます。
animation-delayでアニメ開始のタイミングをずらすのは星のコンテナと同じですが、こちらは個別に回転する角度を変える必要があります。それぞれに@keyframesを用意するのではなく、animation-iteration-countを変えることで、アニメを途中で止めています。
animation-iteration-countはアニメを繰り返す回数を指定できます。1を指定すれば1回だけ、2を指定すれば2回アニメを再生し、永久に繰り返す指定はinfiniteです。さらに、実は小数点付きの数値も指定可能です。例えば0.5を指定すると半分までアニメを再生して止まります。これを利用して、0から1まで、少しずつanimation-iteration-countをずらすことで、円形に広がるアニメを作っています。
まとめ
山の描き方や白黒からカラーへのアニメなどは、はじめに貼り付けたCodePenのcssを参照すればわかると思うので割愛します。
CSSでアニメを作成するのは楽しいです。特に、難しい動きがうまいアイデアで実装できたときは、パズルを解いたような嬉しさがあります。皆さんも、TVや映画の表現や、自然界の動きを見る度に「どうやったらCSSで再現できるかな」と考えるようになる日は近いでしょう。えっ？ならない？！おかしいなあ…