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

animationプロパティの構文

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
animationプロパティの構文を、CSSリファレンスで確かめます。
講師:
03:51

字幕

このレッスンは animation プロパティの構文を確認します 今開いているのはMDNのCSSリファレンスです そのanimationのページが今画面にあります 構文を見てみましょう 下にスクロールします そうすると結構たくさん 6つの値が指定できます 一つ目はanimation-nameとありますが animationの定義をした @keyframes規則の名前です それからanimationの時間 アニメーションの値を変化させるための タイミングファンクション タイミング関数と日本語ではいいます それからアニメーションの開始を 遅らせたい場合のdelay あとはアニメーションを 何回行うかという回数と 最後にアニメーションの方向と いうことになっています そしてこれらはanimationプロパティで 一気に設定できますが 個別に設定したい場合は 個別のプロパティーも用意されています ここにはデフォルト値も記載されていますね もう少し下の方まで見てみましょう 例を見たいと思いますが 例のところは CSS animationを参照して下さいと リンクがありますので このリンクを開くことにしましょう CSSアニメーションと カタカナで書いてありますけれども この中に説明がのっています 先ほど確認した個別のプロパティについて 実際の細かい説明がでていますけれども ここでは animation-nameですね keyframes規則 こちらの方を簡単に確認しておくことにします もう少し下の方までスクロールしますけれども まずanimationの設定ですが ここでは個別のプロパティーで 設定していますね animation name、animation durationですが animationプロパティであれば この後に名前と時間を 並べて書けばいいことになります そしてこの名前ですね これを@keyframes規則で 指定することになります この名前とこの名前が 一致しなければなりません そして@keyframes規則の中では 通常どの値からfrom またはパーセンテージで0% どの値へto または100%ということで その中にプロパティの定めを入れます そうするとfromまたは0%から toまたは100%のこの設定に animationが変化するということになります パーセンテージで指定するといいことは 0と100の間の数字を 指定することもできるということです レッスンをまとめます animationプロパティ その構文は animationのプロパティの後に @keyframes規則で決める名前 それからanimationの時間 値を変化させるタイミング関数 遅れ 繰り返す回数 方向といったものを指定できます そして名前は@keyframes規則で定めます @keyframe規則については 構文としてはまず@keyframeという キーワードの後に名前を定めます これがanimationプロパティで 最初に定める名前ですね そのあとにfromまたはパーセンテージで0% ということでスタートのプロパティの 設定をするのが普通です そして今度は終わりのほうですね 終わりは to まはた100%で 同様にプロパティの設定して 中かっこを閉じるということです

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

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

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

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

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

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