kskCSSアニメで作ったパラマウントのロゴを解説します。複雑なアニメーションを作る時は、アニメーションを分解して別々の要素に振り分けると、構築が容易になります。CodePen.アニメを考える本物のパラマウントのロゴをYouTubeなどで見ながら、どういうアニメにするのかを考えました。年代ごとに色々とバージョンがあり、最新のやつはピクサーが作ったCGアニメらしいです。CSSアニメにするにあたっては、印象的な要素を抽出して、以下のポイントを表現に絞りこみました。星が飛んできて円状に広がる白黒からカラーに変える表現を加えて、ロゴの持つ歴史を表現するまた、今回は、以下のこと切り捨てました。空に浮かぶ空の雲の表現も面白いが、星のアニメに注目してもらうために描かない1つのdivだけで作ることも可能だろうが、その技術的なチャレンジはしない星をcssで描画することも可能だが、シンプルに星の絵文字(⭐️)を使う。22個の星は22個のdivで描画しちゃう。アニメの構成の工夫ひとつながりのアニメーションを複数に分ける工夫をすると、アニメを作成しやすくなります。今回のアニメのポイントは、一番複雑な動きになる星のアニメを、手前から奥へ飛んでいくアニメと、円形に広がるアニメに分けたところです。今回の作品のDOM要素・描画された絵・アニメーションの関係は以下のようになっています。divに描かずに、その::beforeに描くとこで入れ子にしているのがミソです。入れ子の要素のそれぞれをアニメさせると、一見複雑な指定も、シンプルに書くことができます。3手前から奥への星の移動にはtransform-styleとperspectiveプロパティを使います。これらは3Dにしたい要素の親要素に指定します。その直下の子要素のtransformの振る舞いが3Dになると、rotateXやrotateYで変形したときにパースがつくようになり、translateZで前後=奥行き方向に移動できるようになります。500px;を指定して、その子要素をtranslateZ(499px)にすると、画面の手前ギリギリまで近づいて巨大に表示されます。translateZ(500px)にすると、仮想的な視点の位置と一致して、要素は見えなくなります。500px以上になると、仮想視点よりも後ろに行ってしまい、見えなくなります。星のコンテナのアニメでは、translate3d(-2000%,-800%,700px)からtranslate3d(0,0,0px)に変化させています。translateの移動量に%を指定したときの基準になる大きさは、その要素自体の元々の大きさなので、スタート位置は星の大きさの幅x20個分左、高さの8個分上、仮想視点の500pxより200px後ろからになります。あとは22個の星のコンテナのanimation-delayを順番にずらしてあげれば、次々と星が飛んでくるアニメになります。星が円形に広がるアニメは、扇を広げるイメージで実装。星のコンテナのdivの位置はすべて同じ位置にあって重なっていて、星自体はその中に擬似要素で作成。bottom;にして、下中央を扇の要にします。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で再現できるかな」と考えるようになる日は近いでしょう。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。コメントデータの処理方法の詳細はこちらをご覧ください。designerのKSKです。このサイトのコンテンツはhtml5やCSS3の情報や実装で構成しているので、これらをサポートしているブラウザ(FirefoxやChrome)で閲覧することを推奨します。WordPress.。