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

文字と光をアニメーションさせる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
animationプロパティを使って、テキストとその輝きをアニメーションさせます。
講師:
09:05

字幕

このレッスンではー animation プロパティ を使った アニメーションの設定の 仕方についてご説明します 画面には輝いているような テキストがあります けれども その中の1個だけー 切れかかった蛍光灯のようにー 暗くなっては明るくなる という点滅を繰り返しています この部分のアニメーションを 設定したいと思います Dreamweaver で 開いたのはー まだアニメーションの 設定がされていないー HTML ドキュメントです ただし 文字が光る設定は すでにしてあります 文字は div 要素の中のー p 要素 クラスが main です その中にテキストが打ってあります CSS の方を見ますとー まず div 要素の方にー text-shadow プロパティでー 影が三重にかけてあります だんだんボケ幅が 小さくなるようにしてあってー ホワイト グリーン ブルーという設定ですー また main クラスのー :hover 疑似クラスではー 同じ影の色なんですけどもー ボケ幅が広がるような 設定になっていますー ですから マウスポインタ を合わせるとー 影が広がるということですね 確認してみましょう ファイルメニュー> ブラウザーでプレビュー をしてみます テキストが光って いるように見えますね そして マウスポインタ を合わせると光がー うっすらと広がるとー でもアニメーションの設定は まだされていません では アニメーションの 設定をしますのでー Dreamweaver に戻りましょう テキストの中の「 i 」の一文字 だけを点滅させますのでー ここを span 要素 でくくります そして animation プロパティのー 設定をするわけですがー animation プロパティは 二段構えで設定します ですから その書き方をまず最初に 確認しておきましょう animation プロパティの 設定は次のように書きます まず animation プロパティの後にー 名前とアニメーションの時間です この名前というのは何かというとー 二段構えといういった2つ目です @keyframes という規則で名前を定めます そしてその規則はー その中に「 from 」 「 to 」ということでー プロパティをどういう状態からー どういう状態に アニメーションさせるのかー という2つの設定を置きます 「 from 」は パーセンテージで 0% 「 to 」は 100% と書くこともできます ですから animation プロパティの設定をしてー @keyframes 規則でー どこからどこに行くのかという この書き方をしなければいけません では クラス main の中に定めたー span 要素の テキストに対してー アニメーションを設定します クラスは main ですね そして span です この中に animation プロパティを設定します 名前は何でもいいんですけども ここでは「 upper 」 という名前にします そして 時間は5秒にしましょう これで animation プロパティは設定ができました 次は この「 upper 」 という名前でー @keyframes 規則のー 定めをしなければいけません @keyframes と 複数形で「 s 」が入りますので ご注意ください 「 upper 」という 同じ名前を書きます そして この中はー 「 from 」「 to 」 または ここでは パーセンテージを使いましょう 0% そして 100% ですね 簡単なところで まずはー 透明度 opacity を 変えてみましょう 最初は opacity はー 完全に見える状態 「 1 」とします そして 100% になったらー 透明にしてしまいましょう やはり opacity です 透明ですから 0 ということでー 確認してみたいと思います ファイルを保存したらー ブラウザーでプレビューしましょう よく見ていてください 消えました 最初の状態に戻ります おしまいです これ以上 いくら待ってもー アニメーションはおこりません 何も指定しないとー アニメーションは 1回こっきりで終わってしまいます これを繰り返しアニメーション するように設定を加えましょう animation プロパティー に定められる値というのは 実は結構多くてー ただそのほとんどが省略可能です その中の1つに 繰り返し回数というのがあります 何度繰り返すかなんですがー ずっと という場合にはー 「 infinite 」 永久にということですね この設定をするとアニメーション をずっと繰り返します では確認しましょう 保存をしてー ブラウザーでプレビューします だんだんだんだん消えていきます そして 明るくなります また消えていくということでー 今度はアニメーションがー 何度も何度も繰り返し 行われるということになります アニメーションに もうちょっと設定を加えましょう この明るさですね 外に広がっている明るい部分 このシャドウで 行っているんですけどもー ここをまたアニメーション させたいと思います Dreamweaver に 戻りましょう text-shadow プロパティで定めているー この光っている部分ですね このシャドウですが 明るくなる部分なんですけども ここもアニメーションさせます ですから「 from 」 に入れたいと思います 0% ですね コピーしましてー この opacity の 後にペーストします ちょっとインデントを加えましょう そしてー 100% の時ですね ここでテキストシャドウー を無しにします 無しの場合にはー 「 none 」というキーワード がありますのでこれを使います では確認してみましょう ファイルを保存したらー ブラウザーでプレビューします どうでしょうか? さっきとあまり変わらないー という感じがするかもしれません 比べてみるために 先ほどの画面も残してあります こちらです どうでしょうか? 違いがわかりますか? こっちは影が消えているんですよね 拡大しましょう Commandもしくは Ctrl + ですのでー ショートカットでー 300% 拡大しましたー 今アニメーションを 作った方についてはー シャドウを加えています ですからこの 「 i 」の文字が消えて 明るくなって戻る 瞬間にご注目ください 戻る時にー 光がポンと増えますね ところが先ほど作った方はー 戻る時にご注目ください 文字は明るくなって いますけれどもー 外側にあるシャドウ というか光彩の部分 グロウの部分が明るくなりません もう一度先ほど作った方に 戻って確認しましょう なかなか言われないと わからないかもしれませんがー 明るくなる時です この時に1回光が広がりますね このように変化が加わったわけです このレッスンではー animation プロパティの 設定の仕方について学習しました animation プロパティは 今回 3つ値を使っています アニメーションの名前です これはその後ー @keyframes 規則ー で定める値と 一致しなければなりません 次にアニメーションの時間ー そして付け加えたのが アニメーションの回数ですね @keyframes 規則 は必ず名前をつけます それがこのー animation プロパティ の最初に来る名前です その中にはどこから 始まってどこで終わるのかとー from to という キーワードも使いますけどもー 今回は 0% がスタートですー 100% が終わりということでー その中にプロパティ の設定を行いました

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

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

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

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

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

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