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

プルダウンメニューのアニメーションを仕上げる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
プルダウンメニューからロールアウトしたときの動きを加え、文字の色もアニメーションさせます。
講師:
05:20

字幕

これレッスンでは プルダウウンのアニメーションを 二つ付け加えて仕上げます まずマウスポインターを重ねると プルダウンメニューが アニメーションで伸びるんですけれども さらに加えて外した時 ロールオーバーからロールアウトした時ですね メニューが縮んで消えると この縮む部分を付け加えます あともう一つは ちょっと見にくいかもしれませんが マウスを重ねた時 項目の色が 変わるんですけれども その色が徐々に「じわ」っと変わるように カラーの変化にも アニメーションを加えています この二つアニメーションを 付け加えるようにしましょう このドリームウィーバーで開いた HTMLドキュメントは プルダウンメニューが 開くアニメーションだけが 設定されています プルダウンメニュー全体の ul 要素 ID ナビゲーションの中の リスト項目に入れ子になった部分 これがプルダウンですね この部分に対する transition の設定があります そしてこのリスト項目 li 要素ですが 最初はゼロに潰しておいて マウスポインターが メインメニューに重なった時 hover 擬似クラスで 高さを リストの高さを 30ピクセルに 変えるということで伸び縮みの動作をします まず今現在の動作を確認しておきましょう ファイルメニューからブラウザーでプレビュー グーグルクロームです マウスポインターを重ねると真ん中の二つが プルダウンがあるので伸びるように出てきます ただし外した時はいきなり消えてしまうと もう一つ プルダウンメニューがありますが こちらも同様です この閉じる時も開く時と同じように ヒュっと縮むようにしたいと思います では Dreamweaver の方に戻りましょう サブメニューの ul 要素が開いて それから閉じると つまりマウスポインターが外れて 普通の状態に戻るという時は navigation の プルダウンメニューの ul 要素の中の メインメニューのリスト要素 そのサブメニューは ul 要素ですね このセレクターに対して transition を設定してあげると 元の状態に戻る時 普通の状態になる時の アニメーションが加わります ではここに transition と ということで 前の設定と同じ0,5秒ということで設定します ファイルは保存しましょう そして確認です ファイルメニューのブラウザーで プレビューでグーグルクローム メニューが サブメニューが開きます ここまではさっきも 開きましたね マウスポインターを外した時 縮む方も消える時も アニメーションがつけ加わって アニメーションして縮むという風になりました ではもう一つこの項目を選んだ時というか 項目にロールオーバーした時 今は色がすぐパッと変わってますね 白からグリーンに この変化についてもじわっと変わるように アニメーションを設定したいと思います また Dreamweaever の方に戻ります メニューの文字の色というのは プルダウンメニューの ul 要素の中のリスト要素 に 含まれている a 要素に対して 文字の色「白」が設定されています これをアニメーションさせたいので ここに transition をまた付け加えます transition ここも0.5秒にしましょう 「0,5s」ということで 一旦保存しまして 確認しましょう ブラウザーでプレビュー グーグルクロームです 今度は項目の色の変わり方について 注目してください 重ねた時に 0.5秒ですから結構早いんですけれども じわっと変わりますね よく見ないとわかりませんけれども ちゃんとアニメーションが設定されています このレッスンで学んだのは 開いたプルダウンメニューが閉じる時 アニメーションが縮むと 閉じる時のアニメーション それからマウスポインターが重なった時の 文字のカラーを変えるというところでした HTMLドキュメントを見て確認しましょう ロールオーバーで開いたサブメニューが縮む というのはセレクターは リスト要素の中の ul 要素 この transition を加えることによって 元に戻る時 マウスポインターが ロールオーバーから外れて ロールアウトした時の アニメーションになりました それから項目のテキストを変えると いうのは a 要素ですので a 要素のセレクターに トランジション 同じく 0.5秒 加えることで先ほどの動きができた ということです

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

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

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

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

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

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