CSS3のアニメーションテクニック

アコーディオンメニューの開け閉めを滑らかなアニメーションにします。

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
transitionプロパティに定めるタイミング関数により、アニメーションの変化の仕方を変えることができます。
講師:
09:43

字幕

このレッスンでは アコーディオンメニューの仕上げとして アコーディオンと言う 名前にふさわしく メニューの 開く 閉じる と言う動きを 滑らかな animation に してみたいと思います その時  この animation の値の変わり方 動きの変化の仕方 これを easing と言うんですけれども easing は いくつか選べますので それを試してみたいと思います 滑らかな animation にする前の html ドキュメントを Dreamweaver で開きました body 要素を確認しておきます メインメニューの 項目 li 要素には title という class がつけられています そして 実際に サブメニューを開いたり閉じたりと言うのは この a 要素で やっているんですけれども href 属性で target を定めています そして そのターゲットと同じ名前の id 属性をもたせている これを対応させる事で この 選ばれた クリックされたメニューの サブメニューが開くと 言う そう言う構造になっています CSS は後で見る事にして まず 現在の動きを確認しましょう ファイルメニューで ブラウザーでプレビューをします Google Chrome で確認しましょう クリックすると サブメニューが開きます 滑らかな animation ではなくて パッパッと開く訳ですね 例えば 今一番上をクリックすると URL に menu01 と言う target が 識別肢として加わります この加わった識別肢を CSS の方で取り出して それに対応した id 属性のサブメニューを開くと そう言う構造になっています 2番目をクリックすると menu02 Close をクリックすると 識別肢がないと言う事です では  Dreamweaver の方に戻りましょう CSS の方を確かめましょう まず こちらのセレクターです title の ul の li の a 要素 と言う事は メインメニューの中のサブメニューの a 要素 て言うのは サブメニューの項目ですね それが最初高さが 0 で潰れてます ですから 見えません そして メインメニューの項目をクリックすると そのターゲットが 指定されます すると その target の指定する 例えばこの menu01 ですと menu01 と同じ id 属性を持つ要素 この a 要素自身なんですが それが この target 擬似 class で取れます そして隣接セレクターで それに続くul 要素 つまり 選択されたメインメニュー の下にあるサブメニューと言う事ですね その中にある a 要素の 高さが30px に戻って メニューが開くと 言う事になる訳です animation は transition プロパティを使います このセレクター の中に transition プロパティの 設定を加えます transition と まず時間ですね 0.5 秒とします 他に値の変わり方 を設定する関数が 付けられるんですけれども 今これだけで 確認してみましょう ファイルを保存します そして ブラウザーでプレビューしましょう Google Chrome です メインメニューをクリックすると animation の形で サブメニューが開いたり閉じたりします この動きは 最初に少し加速があって また終わりの方に少し減速がある キーワードでは ease と 言う動きになっています この 関数のタイプを いくつか試してみたいと思いますので また Dreamweaver に戻りましょう transition の時間の後に その値の変化の仕方を定める 関数を指定します 比較してわかりやすいのは linear でしょうか linear と言うのは直線的な動き ま 機械的な動きと言う事になりますね ではファイルを保存して ブラウザーで確認します ベルトコンベアのような 機械的な動きになったと 言われれば なんとなくそんな感じがすると 言う感じかも知れません 他のものも試しましょう では linear は 削除しまして 別のキーワードとして ease-in と言うのがあります in と言うのは 変化が 最初に頭の方で起こると言う事です ですから だんだん だんだん加速する 自動車が走り出すような動きと 思って頂ければいいでしょう 保存して確認しましょう ブラウザーでプレビューです クリックすると その 開き始めに注目して下さい だんだん だんだん加速すると言う事ですね 最後の方は割と直線的な感じになっています もうちょっと試しましょうか ease-in は 頭で 変化すると言う事でした そうするとその反対がありまして ease-out これは終わりの方で変化が生じます お終いの方で減速するんですね だんだん だんだん今度は車が 止まる ブレーキがかかるイメージです 保存して確認したいと思います ブラウザーでプレビューしましょう 始めは速いです だんだん遅くなる この動きも割とよく使われる動きですね じゃ もう一個だけ確認します ease-in と ease-out を試しましたので 今度はその両方です ease-in と out 両方加わったのが ease-in-out で 頭でも 終わりでも 変化が起こると ですから だんだん だんだん加速して だんだん だんだん減速すると そう言う動きですね 保存して確認します 始め ゆっくりで 加速して行って で 終わり減速すると 0.5 秒ですから ちょっと分かりにくいかも知れません と言う事なので 実際に えー 動きは見て頂きましたけれども グラフになっている ものがありますので それをちょっとお見せしたいと思います MDN の CSS リファレンスで transition の項目を開きました transition に指定出来るもののうち 値の変化を決める関数 これは transition -timing-function と 言う風に呼ばれていますので これを開きます そしてその説明が このページに出ているんですけれども 分かりやすく図が出ているのは タイミング関数のリンクです こちらを見てみましょう そしてタイミング関数 どんなものがあるか  かなり詳しく出ているんですが 今回ご紹介したのは 一般的な タイミング関数のキーワードと 言うものになります linear とか ease とか ease-in ease-out それぞれ 小さいグラフが表示されています ですから これを見ればどんな変化かと 言うのがわかるかと思います ただ この画面で 小さすぎますので 大きい 図を 用意しときました まず linear は 文字通り直線です 次に何も指定しない時 デフォルトで ease が設定されます 始めにちょっと加速があり 終わりにちょっと減速があります ease-in は 頭に加速があってだんだん速くなって 最後の方は比較的直線的ですね 逆の ease-out はじめは直線的なんですが だんだん だんだん減速して行く これもメニューなどでは 比較的使えるパターンです で 今回最後に使ったのは ease-in-out 頭で加速をし 終わりに減速をする ease との違いが ちょっと分かりにくいかも知れませんが このグラフ 対照してみれば分かります こちらが ease ease-in-out ease ease-in-out と言う事で ease-in-out の方がもう少し メリハリのついた 加速 減速 と言う事になります キーワードは全部で7つあって あと2つあるんですが あとの2つはちょっと変わってます 最初 の値からいきなり 最後の値に行ってしまって 後はずっと最後の値のままと 言うのが step-start です それからその逆になりますけれども ずーっと最初の状態で 最後にいきなり最後の値 に飛んでってしまうと 言うものがありまして これは step-end と 言う事になります これらの説明は CSS リファレンスから飛んできた このタイミング関数 英語で言えば timing-function なんですけれども この中で詳しく説明されています このレッスンでは アコーディオンメニューの 滑らかな 開け閉じの animation を付け加えました プロパティは transition です そして その中でも 値の変化の仕方 を定める タイミング関数についてもご紹介しました 出来上がった アコーディオンメニューがこちらです 滑らかな 動きで サブメニューが 開いたり 閉じたり するようになりました

CSS3のアニメーションテクニック

このコースではCSS3を学び始めた方を対象に、ダイナミックでインタラクティブなアニメーションをCSSでどのように作るのか、そのテクニックや考え方を解説します。実際にさまざまなCSSアニメーションのサンプルをとりあげ、その制作方法についても学習します。このコースでこれらのテクニックを学べば、自分なりのアイデアをいろいろ試すこともできるようになるでしょう。

3時間22分 (36 ビデオ)
現在、カスタマーレビューはありません…
 

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

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

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