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

animationプロパティでアニメーションを定める

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
animationプロパティを使ったCSSアニメーションの定め方について、構文のご説明をします。
講師:
06:52

字幕

このレッスンでは CSSアニメーションを作るための アニメーションというプロパティについて その構文をご説明します 今開いているのはMozilla Developer Network の CSSアニメーションの文章のページです これを表示するには MDNのページ どこでも結構ですけれども 検索窓を使って簡単に検索ができます ここで「CSSアニメーション」と 打って検索をすれば トップに CSSアニメーションの ドキュメントがありますので これを開くと今のページが出てきます CSSアニメーションは 二つの要素で構成されます まずは animationプロパティで設定する アニメーション それから そのアニメーションの内容 どういう時間軸で どんな風に設定をするのかという キーフレームです この二つを 簡単にご紹介しましょう まず animationプロパティです 構文は 次のように animationプロパティの後に もっと値はあるんですけれども 主なものとして五つあげています 最初に アニメーションを定める そのキーフレームの名前 キーフレームというのはこの後で説明しますが アニメーションをどう進行するかという シナリオのようなものがあり その名前を最初に設定します それから transitionプロパティと同じように どの時間をかけて アニメーションするのかという 時間を設定します それから どういう風に値を変化させるのか という関数です これも transitionプロパティと同じです ここまででも結構なんですが もし「何回アニメーションを実行したい」という 回数がある場合には回数を指定します 「無限」にという指定もできます それから方向というのは アニメーションを普通の方向に再生するのか 逆再生するのか あるいは行ったり来たりという 再生の仕方もあります そうした方向の指定をすることもできます また このanimationというプロパティを使えば 名前 時間 関数 回数 方向を 一遍に 指定することができるんですけれども 名前だけ指定したい 時間だけ指定したい というように これらの値を 個別に設定する方法もあります このCSSアニメーションのページを スクロールしていくと アニメーションの設定として このように個別のプロパティが載っています 先ほどの例でいうと アニメーションの名前 キーフレームの規則という形で 設定します その名前は animation-name というプロパティです 時間は animation-duration こちらです direction というのは 行ったり来たりという方向です アニメーションの回数は animation-iteration-count というプロパティで設定することができます そして関数は animation-timing-function このような 個別のプロパティで 一つ一つ値を設定することもできますし アニメーションというプロパティを使えば 一遍に設定することもできます そして CSSアニメーションを設定する時の ポイントの二つ目は この名前です animationというプロパティでしたら その次に設定する名前 あるいは個別に設定する場合には このanimation-name というところで指定するのは @規則 @keyframes という規則で アニメーションをどういう時間軸で行なうのか という指定をします @keyframes規則というのは 次のような構文で定めます @keyframes というキーワードの後に 先ほどのanimation-name あるいはアニメーションの 先頭に設定することになっていた名前 この名前をここに定めます ここに定めた名前を アニメーションのプロパティで 指定するということです その中身は二つで構成されます 幾つかパターンがあるんですが 代表的なものとして 「from」「to」という二つを設定します from からスタートして to にいきます from で プロパティの設定をします そうすると そのプロパティの設定からスタートして アニメーションをして to の方に どんどん移行していくということです from のプロパティの設定から to のプロパティの設定にいくという こういった@keyframes規則を定めて その名前を先ほどのアニメーションで 指定するということになっています MDNのCSSアニメーションのページには 例も載っていますので それを簡単に見ておきましょう こちらがその例です animationプロパティではなく 個別の設定 animation-duration と animation-name を 指定していますね この二つを最低限 指定する必要があります animation-duration は 時間です 3秒かけて そして これが必ず必要な 名前 slidein という名前を指定しています これが@keyframes規則で定めた名前と 一致するから この keyframes規則に従って アニメーションを設定しましょう という意味になります そして この@keyframes規則では このプロパティ「from」から このプロパティ「to」へということで アニメーションを定めています margin-left 100%から margin-left 0%にいきましょうと 幅「width」は 300% から 100% に移行する この二つの設定が from to ということで アニメーションされることになります このレッスンでは CSSアニメーションについて 二つのポイントをご説明しました 一つ目は animationプロパティの 構文です animationプロパティには 名前 時間 回数 関数 それから 方向といった値が設定できます また これらを個別に設定する プロパティもありました 二つ目のポイントは @keyframes規則です これは @keyframes という キーワードの後に 名前を指定して「from」「to」という形で どのプロパティ「from」から どのプロパティ「to」へ アニメーションするのか という指定をすれば その指定に従った アニメーションが行われます

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

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

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

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

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

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