はじめてのCSS3アニメーション

transitionプロパティで要素の回転角と影の長さをアニメーションさせる

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
要素に回転と伸縮、および影のアニメーションを加えて、3D風の表現にします。
講師:
08:55

字幕

このレッスンでは要素に伸縮と回転 それから影のアニメーションを 作ってみたいと思います 今画面に出ているカードが少し傾いていますね それからうっすらと 右下に黒い影が付いています そしてマウスポインターを重ねると 真っすぐになるんですがしかも拡大しています 更に影がぼやっと伸びてくるので あたかも3Dで 手前に迫って来ている様に見えるかと思います この様な表現を作ってみましょう まだアニメーションを 設定されていないHTMLドキュメントを DreamWeaver で開きました 要素は今のところ一つです 要素の中に画像 img と それからテキストが含まれています そしてこの要素には book と img0 という 2つのクラスが割り当てられています book にはこれから後 複数のカードが入ってきた時に 共通に設定する項目 スタイルを この book というクラスに設定します それから個々のカード毎に 変えたい設定 スタイルというのは img で通し番号を付けて そこに設定するとそういう想定になっています 今は一個しかありませんが 後々複数に出来るという設定です マウスポインターを重ねた時 hover 疑似クラスですね その設定は全体共通 book 共通にしたいので book に設定をします ですからここへ 要素の book ですね bookshelf ではありません book です その hover ですね マウスポインターを重ねた時 更にフォーカスが当たった時と クリックした時も同様にしますので その疑似クラスも加えます focus それから active ですね それらに対してマウスポインターが 重なった時というのが一番典型的なんですけど まず回転と伸縮から与える事にしましょう 回転伸縮は transform ですね にしてまず回転から rotate で 重なった時は真っすぐになるので0度です 0デグリー 度数なので deg という単位を付けます 重なってない時は個別の設定になりますので 後で img の方のクラスに 設定を加えます それから拡大縮小は scale です x, yは同じ値にしますので数字は1個だけ 1.2 とします そしてアニメーションですから transition ですね transform ではありません transition 時間だけ指定しましょう 0.5 とします そして何でもない状態の時は 個別の設定ですので img0 こちらに transform を加える事にします transform そして rotate ですね -8 度 反時計回りの場合には - を付けます 8 deg scale は指定しなければ 1がデフォルトになっていますので これで結構です ではファイルを保存して確認しましょう ブラウザーでプレビュー します Google Chrome で見てみましょう 回転してますね そしてマウスポインターを合わせると 手前にせり出して来て しかも拡大すると 影が無いとただ回転して 拡大してる様に見えるかもしれませんが 影を付ければより 3D 感が増します では影を付けましょう まずはマウスポインターが 重なっていない時の影です という事はクラスは book の 要素の book ですね hover ではありません hover 疑似クラスではない方です ここにボックスシャドーを加えましょう box-shadow 手前にせり出した方ではない方ですから 元々の状態ですから影は小さめにします 2px y も 2px ぼけ幅 4 px それからカラーは rgba 黒ですから rgb は 0 でアルファをかけます 0.6 としておきましょう それから今度は hover が典型ですけども この疑似クラスの方ですね こちらに影を付け足します やはり box-shadow 手前にせり出して来る場合ですから 影は大き目にしかもずらします x, y は 15 px ずらします ボケは大きく 20 そして rgba ですね やはり黒です そして手前に来ると 影は離れるので薄くなりますよね ですから影は少し薄目に 0.4 とします これで保存をして確認してみましょう ファイルを保存して ブラウザーでプレビュー をします Google Chrome で見てみましょう まず最初の状態で 右下に影が濃い目に付きましたね 小さめに そしてポインターを重ねると ぼやっとぼけて広がると こうなってくると 3D ぽくなったのではないでしょうか 後少しだけ手を加えたいと思います DreamWeaver に戻りましょう 細かすぎて伝わらないかもしれない手を 2つ程加えます 1つは カードには淵が付いていましたね アウトラインが付いていました それは薄目のグレー silver なんですけども これが手前に来た時に濃くしたいと思います という事なので手前に来た時の hover 疑似クラス等ですね ここでボーダーのカラーですから 文字通り border-color ですね collapse ではありません color です 濃い目のグレーという事で dimgray というのがあります これを指定しましょう 後もう1つはですねせっかくなので タイミング関数を加えましょう イーズインというタイミングにします ease-in です in というのは 始めにという事なのですが 始めに加速がかかります 始めに加速が段々かかっていくという事ですね ですから自動車が走り出す様な感じと 思って頂ければいいでしょう ではファイルを保存します そして ブラウザーでプレビュー します 細かいのでよく見ていてください この淵が薄いグレーになっていますけど マウスポインターを重ねると濃くなりました 後、変化の仕方が段々段々加速してくると という感じお分かり頂けるでしょうか? 言われないと分からない という細かい手ですけども ちょっと加えてみました このレッスンでは 大きく2つのアニメーションを加えました 1つは回転と伸縮ですね 始め少し傾けておいて マウスポインターが重なった時に それを0度に戻し拡大すると 2つ目は影です 影は最初は濃い目なんですが でも伸び幅が短め あまりぼけてない それが手前にせり出して来た様に見せる為に 拡大した時 ぼけ幅を大きくして x, y もずらす そしてアルファを薄くするという事で 3D 風のアニメーションが出来上がった訳です そして transition では時間の他に ease-in 段々加速してくるという設定にしました 後 border-color 色はちょっとおまけです

はじめてのCSS3アニメーション

最近のブラウザではCSS3の実装が進み、JavaScriptを使わなくてもダイナミックでインタラクティブなコンテンツが作れるようになってきました。このコースではこれまでの静的なCSSの基礎を学んだ方を対象に、そのようなアニメーションをCSSでどう定めればいいのか、その書き方や考え方について解説します。

2時間39分 (29 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年06月17日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。