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

アニメーションの開始を遅らせる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
animation-delayプロパティを使うと、アニメーションを始めるタイミングを遅らせることができます。
講師:
06:16

字幕

このレッスンでは animation の開始時間を 遅らせる方法について ご説明します 今 画面でお見せしている テキストの animation この animation の設定は 基本は一緒です けれども スタートするタイミングをずらす事によって このように連続的に 出っ張ったり 引っ込んだりと 言う表現が出来るわけです animationに 時間差をつける事によって 表現力を増す事が出来ると 言うご紹介をしたいと思います 今 Dreamweaver で開いているのは animation の 時間差をつけていない状態の html ドキュメントです body 要素には h1 要素 class は name と 言う名前ですけれども そこに 5 文字 入っています それぞれが span 要素の中です その span 要素に対して animation 設定がされています そして keyframe keyframes 規則の中に from to と言う事で どういう風に変化するのか これは 影の大きさを 縮めたり 伸ばしたり と言う風に 設定しているんですけれども そうした設定がしてありますが 全て span 要素に対して共通になっています この状態で  animation を確認しましょう ファイルメニューから ブラウザーでプレビューです animation が行われています 文字が 出っ張ったり引っ込んだりと 言う風になっていますが 全部 揃っていますね この animation の開始時間を 文字によって 少しづつずらすと 言う事をしてみたいと思いますので では Dreamweaver の方に 戻りましょう body 要素の中で 文字一つ一つを span 要素で分けてあるのは 一つ一つについて 別々の設定が出来るようにと 言う考慮から この様にしてあります では どういう風に  セレクターを設定するかですね まず h1 要素には name と言う class を 設定してあります ですから name と そして span 要素なんですけれども そん中の 何番目と言う指定ができます span 要素が言わば 兄弟の様に並んでいる訳ですが 何番目の兄弟と 言う指定が nth-child と 言う擬似クラスで指定できます さて その括弧の中に 何番目と入れますので 2 と そして ここに設定を加えます animation を 開始を遅らせると言うのは animation delay と 言うプロパティになります このプロパティを簡単に リファレンスで確認しておく事にしましょう MDN の CSS リファレンスで animation の項を 開きました すると animation と言うプロパティについては 様々な設定が結構たくさん 出来るんですけれども そん中の animation の 遅れって言うのは delay という風に言われます animation のプロパティで こちらの値を まとめて設定する 言う場合にはここに delay を設定すればいいんですけれども 今回は 遅れだけを 遅れだけを 一個一個 個別に設定したいです その場合にはこの animation-delay と言うプロパティを 直に使ってしまうと delay 遅れだけを設定する事ができます デフォルトは 0 ですので みんな遅れないと  一斉にスタートする訳ですけれども ここに時間を指定してあげれば その分 遅れて animation が始まる と言う事になります animation-delay プロパティの設定については 分かりやすい様に初めは ちょっと多めの 0.5 秒 と言う事にしたいと思います 2番目の文字 の animation が 0.5 秒遅れてスタートします では ファイルを保存して ブラウザーで確認しましょう ブラウザーでプレビューです Google Chrome で見てみましょう 2番目の u だけが 少し遅れてきますね この様にして 遅れを 設定し  時間差を作ればいいと言う事です では 今度はきちんと 5文字について設定しますので もう一度 Dreamweaver に戻ります 5文字の animation ですけれども 最初の文字は そのまますぐにスタートしていいので 後の4文字について この animation-delay を 設定する事になります コピーしちゃいましょう コピーをして ペースト control もしくは command v ですね ショートカットを使わしてもらいます 4つ 設定しました まず順番を 文字の 順番を 345と付けてあげます あと 時間は 0.5 ちょっと大き過ぎますので 0.15 づつ 分かりやすい様に 30 と付けときましょうか 3 でも構わないんですけど 45 ですね そして 6 と 60 としましょうか ファイルを保存します そして 確認してみましょう ブラウザーでプレビュー Google Chrome です これで 0.15 秒 ずいぶん短いですけれどもね 0.15 秒づつの時間差で 出っ張ったり引っ込んだりと 言う animation になりました では このレッスンについてまとめましょう まず この span 要素の様に 兄弟要素が並んでいる時に その何番目と 言う形で 要素を指定したい時には nth-child と言う 擬似クラスを使います そして 括弧の中には 何番目と言う数字を入れればいいです そして このレッスンの本論ですけれども animation の遅れを 指定したいと言う場合には animation-delay と言うプロパティで 遅らせる時間を指定すれば結構です

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

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

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

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

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

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