HTML と CSS を使用してアニメーション効果を実現する (WWDC 2015_html/css_WEB-ITnose)

原文: https://cssanimation.rocks/wwdc15/

翻訳者: Zhou Xiaoyi (@Helkyle)
出典: w3cplus

Appleは毎年、大きなカンファレンスを開催しています。 WWDC (Apple Developer Conference) は、iOS 開発者と OSX 開発者にとって、モバイル デバイスとデスクトップ ソフトウェアにおける Apple の高度なハイテクと新しいコンセプトについて学ぶ良い機会です。

毎年この時期になると、新しいアイデアがたくさん出てくるのですが、今年はシンプルな丸と図形で作ったアイコンに驚かされたので、HTMLとCSSを使って実装してみることにしました。

WWDC 15 招待カード

Apple のアイコンは通常、iOS 7 の写真アイコンなど、色と形状のオーバーレイを使用します。今年のWWDCの招待状には以下の製品が使用されました。

これは、一連のカスケード形状と半透明の形状で構成されており、HTML と CSS での実装に非常に適しています。

HTML

このような責任ある作品をデザインするには、少しの分析が必要です。まず、パーツごとに分解していきます。 大まかな方向から見ると、主な形状は 8 つの大きな円です。

ここでは、大、円、を抽出しやすくします。他のカテゴリは後で個別に記述すると、コードがよりきれいになります。

次に、大きな円の上に 8 つの小さな図形があります。これらの図形は 4 つの円と 4 つの四角形で構成されています。この四角形は次のように HTML を書きます。 8 は各 div のクラス名を設定するために使用されます。これの利点は、後で形状や色を設定するのに非常に便利であることです。

最後に、ロゴの中央に 2 つの大きな四角形を配置します。

同様に、ラージとスクワクルを使用しました。

ロゴとコンテンツ

次に、中央の四角形にコンテンツを追加します。

ここでは SVG 画像と招待状の内容を使用します。招待状のフォントはSan Franciscoですが、OSX標準のフォントではないので、ここではHelvetica Neue Lightに変更しました。

円と四角のスタイルを書きます

最初にしなければならないことは、円と角のスタイルを書くことです。

ほとんどの図形は大きいので、デフォルト値を大きく設定します。各要素は絶対的に配置され、白い境界線が付いています。境界線は招待状のものとまったく同じには見えないかもしれませんが、形にもう少し輝きを与えることができます。

次に、大きな円にスタイルを追加し、境界線の半径を 50% に設定し、左と上の値を使用して位置を設定します。

このとき、すべての円は同じ位置にあります。ちょっとしたトリックを使用して、transform-origin の値を通じて位置を変更します。デフォルトのtransform-origin値は(50%, 50%)です。ここでは円の下部に値を設定し、少し回転させると形状が現れます。

各サークルに CSS スタイルを追加してみましょう。招待状の画像をよく見ると、左下隅にサークルがあることがわかります。これを知っていると、円に対する他の回転角度を書くことができます。

各ブロックには色があり、特定の角度で回転します。以下のアニメーションは、生成プロセスを動的に示しています。

上記のプロトタイプを使用して、他の形状のスタイルを記述することができます。まず、正方形は、さまざまな角の丸い円とみなすこともできます。

円を配置した後、特定の回転角度と色を指定しました。幸いなことに、同じ形状を同じスタイルでスタイル設定することもできるので、小さい形状のスタイルを記述してみましょう。

これらの図形を小さくして中心から遠ざけてみましょう。そして、上記と同じトリックを使用します。

小さな正方形

小さな正方形の角度が間違っています。45度回転する必要があります。

2 つの方法から選択できます。各正方形に追加の要素を追加して回転するか、CSS で疑似クラスを選択できます。どちらの方法でも機能しますが、私は後者の方が好きです。

まず、背景色、境界線、ボックスの影を削除します。

::after 疑似クラスを使用して、同一の正方形を作成し、それを 45 度回転します。

これで、大きな円とその他の小さな図形ができました。

コンテンツ正方形

2 つの大きな正方形にはすべてのコンテンツが含まれており、それらを中央に配置し、暗い透明色を与えます。

最初の大きな正方形を回転させることができます。

アニメーションを追加

元の招待状は静的でしたが、私たちの Web サイトは CSS アニメーション ロックスと呼ばれていません。 これを行うには、各コレクションをspan要素で個別にラップし、span要素にアニメーションを適用します。

まず、スパン要素がオーバーフローしないように配置します。

各スパン要素は中点に配置されます。

次に、各スパン要素にアニメーションを適用します。

同じキーフレームを使用しましたが、アニメーション時間を 10 秒、20 秒、30 秒に変更しました。それで、彼らは1分後に元の位置に戻りました

キーフレームは次のとおりです

開始位置の回転角度は 0 で、最終回転角度は 360 度です。

CSS の再利用

これは楽しい実験でしたが、最大の収穫は、回転と小さなシェイプに同じ CSS を使用できることだと思います。すべてのアニメーションは同じキーフレームを使用します。これにより、CSS ファイルのサイズが圧縮され、読み込み速度が確保されます。

Prefix

この例を作成するとき、アニメーションを作成するたびにブラウザー カーネルを考慮する必要がないように、autoprefixer を使用しました。