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

アニメーションするプロパティ値に変化を与えるタイミング関数

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
transitionプロパティに与えられる値の中で、アニメーションするプロパティの値の変え方を定めるタイミング関数についてご紹介します。
講師:
06:42

字幕

このレッスンでは "transition" プロパティに 定められる値の中で そのプロパティのアニメーションのさせ方 値の変化の仕方を決められる タイミング関数について ご紹介したいと思います 今MDN CSSリファレンスの "transition" の項目を 開いています "transition" の構文は "transition" プロパティの後に 4つの値を指定する事が出来ます 先ず始めは "transition" する プロパティの名前です 名前を設定しなければ "none" ていうのは 設定しない場合なんですが 変化するプロパティ全てを アニメーションさせます 2つ目はアニメーションにかける時間です そして3つ目が "timing-function" どの様にアニメーションの値を 変化させるのかという事です それから最後がアニメーションを遅らせる スタート待ちをさせるっていう事です "transition" プロパティを使えば これらを全てまとめて設定出来ますけども 個別に設定するプロパティもあります こちらがそうなんですけども4項目あって "transition" する プロパティの名前というのは "transition-property" です デフォルトは先程言いました通り "all" ですので 全ての変化するプロパティは アニメーションさせる事になります それからアニメーションにかける 時間というのは "transition-duration" です デフォルトが "0s" になっていますが "0s" ではアニメーションになりませんから これは指定しないと意味が無いですね それからアニメーションする その値の変化のさせ方 これをこれからご説明するんですけども "transition-timing-function" という事になります デフォルトは "ease" という関数になっています それからスタート待ちは "transition-delay" という事で デフォルトは "0s" ですので待たずに 直ぐにスタートするという事になります ではこの "transition-timing-function" について見ていきましょう リンクがありますので "transition-timing-function" です この "transition-timing-function" のページでは "transition-timing-function" の 細かい構文的な説明が載っています けれども今回は細かい構文でなく どんな関数があってどの様に値が変化するのか という事をお見せしたいので "タイミング関数" のリンクを開きます "timing-function" という風に書いてありますが 日本語で言えはタイミング関数です このグラフの様に様々な形で 値を変化させる事が出来ます もしそれを自分で 独自に設定したいという場合には "cubic-bezier()" というクラスで指定をします ここに小さく出ていますけども 見にくいので画像を拡大してあります イラストレーターで見たことがある様な線が 引っ張ってあります イラストレーターではこれを方向線と言って この引っ張り方あるいはこの角度によって カーブの仕方が変わります まさにそのイラストレーターと同じ "bezier" の形で このグラフのカーブの形を決めるわけです そしてこの方向線の座標を決めてあげて 2つ座標がありますね x, y ありますので 2個、2個で4個です その4個の値を "cubic-bezier()" というクラスに指定してあげると 自由に設定が出来るという事なんですが さすがにここまで細かい事は今回は致しません もし興味があったらご覧ください 既に "一般的なタイミング関数のキーワード" というのがあって ここから選べば 大体主なものが設定出来ますので こちらを見ておきましょう 予め定めてあるタイミング関数のキーワード というのは全部で7つあります この左側に グラフと共に説明が書いてありますね "linear" "ease" "ease-in" "ease-in-out" グラフは見えませんので 下スクロールしますとこんな感じです これが "ease-out" "step-start" "step-start" だけ何故か グラフが大きいんですけども "step-end" とあります グラフがちょっと小さいので 拡大してみたいと思いますが 後、先程もし自分で設定したければ "cubic-bezier()" という クラスを使って設定出来ますよ と申しあげました もちろんこれを細かくやろうとすると 結構作業が大変なのですが それぞれのキーワードの指定を もしするんであれば "cubic-bezier" を こういう風に使えばいいですよと書いてあります ですから意欲のある方はこれらの数字を見て じゃあこの数字をこう変えてみたら もう少し自分の好みの変化になるんじゃないか という研究をしてみるのも面白いでしょう じゃあこの小さいグラフ 順番に見ていきたいと思います まずは "linear" まさに直線 リニアです それからデフォルトになりますけども "ease" です 始めに加速が入り終わりに減速が来ます それから "ease-in" "in" というのは スタートの所なんですけども スタートで加速が入ります "ease-in-out" "in" と "out" 両方ですね 始めと終わり両方に加速減速が入ります デフォルトの "ease" と 一見区別が付きにくいかもしれませんが 大きくしましたので比較が出来ます こちらが "ease" ですね こちらが "ease" です "ease-in-out" "ease" "ease-in-out" "in-out" の方が ちょっとめりはりが付いた という事がお分かり頂けるかと思います それから "ease-out" "out" ですから 終わりの所で減速が入ります 後の2つはちょっと変わっていますけども "step-start" 最初の値から いきなり最後の値に行ってしまいます そして最後の値のままずっと過ごします 今度は "step-end" 最初の値のままずっと行って 最後にいきなり最後の値に行くという事です このレッスンでは "transition" プロパティに 指定出来る値の中で アニメーションの変化のさせ方 値の変化のさせ方を決める "timing-function" "transition-timing-function" というプロパティになりますけども その中に設定出来る タイミング関数についてご紹介しました どの様なタイミング関数があるのか 7つありました この中で選んで設定をすると 簡単にアニメーションの値を 変える事が出来ます

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

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

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

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

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

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