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

ボタンのアニメーションを仕上げる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ロールオーバーとクリック時にカーソルのかたちを変えるとともに垂直に動かし、アニメーションの時間も変えて、ボタンの仕上げをします。
講師:
08:04

字幕

このレッスンでは ボタンのアニメーションの仕上げとして 三つ手を加えます 一つはマウスポインタを重ねた時 ポインターが指差しカーソルに変わっています 二つ目はポインタを重ねた時の ロールオーバーですけども カラーと影が変わるだけでなく 位置が少し下に動いています クリックした時もさらにちょっと 下に下がります 三つ目はアニメーションの速さです ロールオーバーした時とクリックした時は クリックした時の動作の方が早いです この三つを順番に行っていきましょう 三つの手を加える前の HTML ドキュメントを Dreamweaver で見てみます まずカーソルです カーソルは クラス btn の a 要素の セレクターに対して設定します カーソルの設定は文字どおりカーソルです そして指差しのポインターというのは ポインターと これでボタンに マウスポイントを重ねた時に 指差しカーソルに変わります ファイルを保存して ブラウザでプレビューしましょう グーグルクロームで見ます マウスポインターを重ねてみると 指差しカーソルに変わりました ではまた Dreamweaver の方に戻りましょう 次にマウスポインタを重ねた時に 縦に垂直方向に下方向に少し移動します これは transform という プロパティを使います 重ねた時ですからクラスボタンの a 要素の hover 擬似クラスですね このセレクタに対して設定を加えます では box-shadow の下に tranform です そして transform というのは 変換という意味でいろんな変化が加えられます 回転したり拡大縮小したり あるいは仕上げさせたいと で今回は移動なので移動は translate です そして translate については x 方向 y 方向あるので y 方向の translate y そしてその長さを指定します 2ピクセルにしましょう さらにクリックした時も移動させたいので ではこの量はコピーしてしまって active 擬似クラスですね ボタンクラスのa要素の active 擬似クラスのセレクターに対して 同様に設定を加えます コピーしましたのでペーストです で2の2ということでは 同じになってしまいますのでさらに 2ピクセル移動ということですから 4ピクセルとします では一旦保存しまして ブラウザで確認しましょう ブラウザープレビュー グーグルクロームです マウスポインタを重ねると 少し下に移動しますね こうするとダイナミック 3Dのように見えますね そしてクリックすると さらに もうちょっとだけ移動します 影だけ変えた時よりも もうちょっと 動きがダイナミックになっていますね では三つ目の手を加えます Dreamweaver に戻ります クリックした時のアニメーションの 速さを速くしたい ということはアニメーションの 時間を縮めたいということですね アニメーションの時間は 元の設定で transition 0,5秒というふうにしてあります これをクリックした時 つまり active 擬似クラス このセレクタの時にはもっと短くしたい transition もう一回書く という手もあるんですけれども 時間だけ変えたいという場合には 「時間だけ」というプロパティがあります プロパティは transition の中の時間 間隔という意味になりますけれども duration transition-duration というふうにすると時間だけを変えると transition の内容には 色々な設定 値の設定がありますけれども その中の時間の設定だけを変えるという プロパティになります そしてこれを元々は0,5なので 0,2としましょう ファイルを保存します そしてブラウザで確認しましょう ブラウザーでプレビュー グーグルクロームです マウスポインタを重ねます このスピードちょっと確認しておいてください クリックします0,2にしましたので このようにして三つの手が加わりました この機会に transition のプロパティについて 少し補っておきましょう MDN の CSS リファンレンスを開きました transition の項目です これを見てみると transition というプロパティ すでに使ってありました 0,5という設定がしてあって 今回はそれを0,2に transition-duration を変えたんですね 実はこの transition というプロパティは この四つの transition の個々の項目を 設定するものを「まとめて」 設定できるという そういうプロパティなんです ですから今回はそのまとめて 設定できるものを使わずに 個別の設定の中で duration を使いました この四つはすでに デフォルト値が与えられています 例えば delay というのは アニメーションを始めるまでに 「ちょっと待ちなさい」ということなのですが デフォルトでは、ゼロ 待たないですぐ始めます transition-duration これ デフォルトはゼロなのですが ゼロではアニメーションになりませんので 普通はこれは必ず設定します それからプロパティ このプロパティだけを アニメーションさせたいという場合には transition プロパティということで 指定ができるのですが 何も指定しなければ すべてのプロパティ 変化のあるプロパティを 全部変えると 通常それでいいので あまり指定しなくても大丈夫だと思います それから四つ目はファンクションなんですが どんな風に値を変化させるかと 変化させ方ですね これはもうデフォルトは決まっていて 加速減速がいい具合に組み合わさった easeという関数が指定されています 今回は transition の中の 一個だけを変えたいというプロパティ transition-duration を使いました Dreamweaver に戻って レッスンをまとめましょう 今回は三つ手を加えました 一つはマウスポインタを重ねた時 指差しカーソルに変えるのは カーソルというプロパティで ポインタという値を設定しました 二つ目はポインタを重ねた時 少し垂直方向に動かしました 座標の変換になるので transform という プロパティになんですが 垂直方向の移動は translate y になります そして三つ目 transition で時間を変えたと いうことなんですが transition-duration という プロパティで時間を短くしました これでボタンの動きが よりダイナミックになりました ポインタを重ねると指差しカーソルになり クリックした時に速さが スピーディになりました そしてボタンが縦にちょっと 移動することで 動きがより ダイナミックになったのではないでしょうか?

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

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

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

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

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

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