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

文字に新たなアニメーションを定める

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
要素からひとつを選んで新たなアニメーションを定めます。
講師:
09:23

字幕

このレッスンでは イルミネーションが光るような テキストに対して その中の1つの文字に 他とは違った アニメーションを設定します。 この右下の「m」なんですけども 点滅する、その点滅のタイミング あるいは時間などが 他の2つの点滅する文字と違っていますね。 このような設定をどうやって加えればよいか ということをご説明します。 Dreamweaverで開いたのは まだ、この3行目のテキストに対して アニメーションを加えていない HTMLドキュメントです。 今の状況を確認しておきましょう。 ブラウザーでプレビューします。 上の白い文字2行については 「I」と「o」が ちょっとずつ点滅しますね。 けれど、3行目の赤い 「m」は全く動きません。 この「m」に対して アニメーションを 設定しようということです。 ではDreamweaverの方に 戻りましょう。 この3行目のテキスト idでsubと属性が 与えられていますけれども 「o」については、 spanで囲んであります。 これはアニメーションではなくて 少し電気が切れたような暗くなっていました。 それは、ここで半透明にして 明るく光るシャドウを無しに しているために暗かったわけです。 では今度は「m」に アニメーションを加えたいと思います。 上の2行については アニメーションする文字は span要素で設定してあります。 同じくここをspan要素にしましょう。 そして、閉じます。 このまま、何もせずに確認するとどうなるか 見てみましょう。 予想がつきますね、大体。 ファイルを保存して ブラウザーでプレビューします。 当然、こうなりますね。 「o」に対して 電気が切れたような暗くなるような 設定をしてあるわけです。 同じspanを設定したわけですから 「m」の方にも そのCSSの設定が入ってしまいます。 でも、やりたいことは 「o」の設定と「m」の設定 同じspan要素なんですけれども 変えたい、ということです。 その時には、擬似クラスを使います。 その擬似クラスというのは 「:nth-of-type」 というものです。 構文は、要素に対して 「:nth-of-type」として 括弧の中に、整数を与えます。 そうすると、親から見て 整数番目のその要素を示すわけです。 先ほど、spanが2つあった時に 1個目と2個目を変えたい ということだったですね。 そういう場合には、1個目の要素 2個目の要素 それぞれ指定することができるわけです。 では、アニメーションを設定する前に 2つのspan要素のうちの 1番目のspan要素にある「o」だけを 電気が切れたように暗くしたい この設定を加えたいという場合 さっそく、今の擬似クラスを使いましょう。 擬似クラス 「:nth-of-type」です。 そして、この中に 1番目なので「1」と入れます。 では、保存して確認しましょう。 ブラウザーでプレビューします。 真ん中の「o」 つまり1つ目のspan要素だけが 暗くなりました。 2つ目については まだ何も設定されていませんので デフォルトのまま、ということになります。 2つ目のspan要素に アニメーションを加えます。 ではこちらはこのまま コピーしてしまいまして ペーストです。 そして、数字は「2」にします。 これで、アニメーションさせたい「o」が セレクトされます。 アニメーション設定は アニメーションプロパティですね。 そして名前は 1つ目のアニメーションが 「upper」なので 反対の「lower」にしましょう。 アニメーション時間は10秒程度 そして、タイミング関数 値の変化のされ方は 「step-end」とします。 最後に急に変わるという変化のパターンです。 永久に繰り返してください 「infinite」と。 次に、キーフレームの設定をします。 あ、アニメーションの綴りが違っていますね。 「i」が抜けています。 そして、@keyframesの規則を こちらと同様に決めます。 これ、いただいちゃいましょう。 コピーをして そして、ペーストです。 変えるべきところを 順番に変えていきましょう。 まず、名前は「lower」としましたので 念のため、綴りミスがないように コピー&ペーストします。 それから、影の色が違ってきます。 まず、赤い文字ですから 「red」ですね。 それから、 明るめの赤は「firebrick」 そして引き締めるのが、暗めの赤 「darkred」です。 あとはキーフレーム揃っていると アニメーションのタイミングが 揃ってしまいますので変えていきます。 ちょっとずつ変えますね。 「22%」を「23%」 ちょっと縮めて「37%」 ここは「61%」 キーフレームを増やします。 「96%」ぐらい。 スタートのところは、 こんなとこにしましょう。 あとは、こちらです。 ちょっと減らして「19%」 「32%」 少し狭めて「59%」 そして、伸ばしましょう。 「86%」 これで大丈夫でしょうか。 まだカンマが1個抜けてますね。 カンマを加えます。 では確認してみましょう。 ファイルで保存してから ブラウザーでプレビューします。 点滅のタイミング 他の2つの文字とは変わっていますね。 もうちょっと細かく 調整したいと思います。 では、Dreamweaverの方に戻りましょう。 キーフレームをもういくつか加えます。 「37%」と「61%」の間が 少しあいていますので ここに「46%」 それから「51%」とします。 それから「61%」と「96%」の間もちょっとあいていますね。 ここは 「71%」とします。 これらに対応して 今度は下の方の 変化する方の状態ですね。 こちらも追加していきます。 「32%」の後 「45%」 「50%」 それから、「59%」の後 「69%」というふうにします。 これで、かなり細かい点滅が入ります。 今加えたのは特に 「45%」からすぐ「46%」 「50%」に行ったら、 またすぐに「51%」で 1%の差で戻ってしまいますね。 ですから、細かい点滅の感じになります。 ここも「69%」から 「71%」ということですので 点滅がかなり細かくなる ということを確認してみましょう。 ファイルを保存したら ブラウザーでプレビューします。 どうでしょうか かなり点滅が細かくなっていますね。 しかも、すぐ戻ってきたりとか いかにも切れかかっている風になりまして 全体として、場末の何か イルミネーションのような感じに なっていますけれども 雰囲気は出てきたんじゃないかと思います。 このレッスンでは 1つの文字に新たな点滅の アニメーションを加えました。 その時に、 同じ2つのspan要素を区別するため 擬似クラス 「:nth-of-type」というので 2つのspan要素を区別しました。 そして、アニメーションの方は 基本的には 予め設定してあったものを ベースにしたのですが キーフレームをかなり細かく打って 点滅を細かくさせるという アニメーションを作りました。

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

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

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

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

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

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