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

animationプロパティに指定するタイミング関数

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
animationプロパティに指定できるタイミング関数の種類と値の変わり方をご紹介します。
講師:
02:56

字幕

このレッスンでは タイミング関数をご紹介します タイミング関数と言うのは animation プロパティ あるいは transition プロパティ でも使えるんですけれども 値をどのように変化させるのか と言う その変化のさせ方を 関数と言う形で指定します その関数を指定する事によって どんな変化が起こるのか あるいは どう言う関数があるかと言うのを 簡単にご紹介します MDN の CSS リファレンスで animation プロパティの ページを開いています そして animation プロパティで 指定出来る プロパティの中で タイミング関数と言うのは animation-timing -function と言う形で表現されています これを見てみます そして animation -timing-function についての 説明のページに行くんですけれども 細かい説明は こちらを見て頂く事にして どんな関数があるかと言うのは このタイミング関数と言う リンクで 見る事ができます さて その中の 一般的なタイミング関数のキーワード と 言う所に飛びます そうすると 具体的に ちょっと小さいですけれども グラフが出てきますので 値が時間に伴って どう変化するか 言う事が 簡単に見て取れると思います linear と言うのは直線的ですね まさにこの linear と言う名前の通りです デフォルトは ease になっています ease は軽く加速をして 終わりで軽く減速をすると 言う事です そして ease-in in と言うのは 頭でって事なんですけれども 頭で加速をします それから ease-in-out これは in と out 両方とも えー 減速 加速が入るんで 最初に加速をして 後で減速をする ease-out と言うと 終わりで減速をする step-start は いきなり  あの 速く入ってしまうんですけれども ちょっと ease-in-out と ease は 分かりにくいかもしれません そこで この図を 別に 開きました こちらが デフォルトの ease です 軽く加速をして 減速をする ease-in-out 切り替えますので  よく見てて下さい ちょと 変化が こちらの方が メリハリありますね もう一度 ease がこちらです ease-in-out このようにして 値の変化を タイミング関数で 選ぶ事が出来るわけです このレッスンでは タイミング関数について ご説明をしました animation プロパティ  あるいは transition プロパティで タイミング関数を指定すると このグラフにあるように 様々なパターンの 値の変化のさせ方を 切り替える事ができます このグラフを見ながら どう言う値の変化にしたらいいかと 言う事を 確認して えー ご自分で好きな タイミング関数を選んで下さい

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

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

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

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

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

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