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

animationプロパティでテキストをフェードイン・フェードアウトさせる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
animationプロパティを使って、テキストの影の設定をアニメーションさせることにより、フェードインとフェードアウトを表現します。
講師:
08:34

字幕

このレッスンではアニメーションプロパティを使って テキストのアニメーションをさせてみます 具体的にはこの画面に出ているように フェイドイン フェイドアウトを繰り返します そしてこのテキストは影を使って 出っ張ったように見せていますので その影の設定を アニメーションプロパティで操作して 浮き上がったり また消えて行ったり アニメーションを繰り返させます ではこのアニメーションを加える前の stmドキュメントを Dreamweaverで確認しましょう "body"要素の中には"H1"要素 "class"が"name"ですけど その中に文字が5つ入っています あとで文字一つ一つを 設定変える予定なので ""でくくってありますけど 今のところは気にしなくて構いません そして浮き上がらせる文字ですが 文字のフォントそのままは "color"が"transparent"に なっていますので透明です しかし白い影で上の文字を作り そしてその下に黒い影を置くことで 出っ張ているように見せています では今の状態を確認しておきましょう ファイルメニューから [ブラウザでプレビュー]です [Google Chrome]です まだアニメーションする前の テキストの状態です 黒い影がうっすらと下にあり その上に載っているのは フォントは透明ですので 白い影を少し縁を ぼかして載せてあるということですね では確認ができましたので Dreamweaverに戻りましょう htmlドキュメントに アニメーションプロパティの設定を加えます セレクターは"class"が "name"でしたから"name"ですね そして"span"で"span"の要素に 含めていましたから"span"と ここにアニメーションプロパティを設定します アニメーションで まず最初にアニメーションの名前 後で"@keyframes"規則で 設定する名前をここで書いておきます どういう名前にしても結構ですが "name"のクラスに 設定するアニメーションですので まんま"name animation"とします そして最低限 時間は指定しないといけないので 初めは長めに3秒としておきましょう "3s"です そしてアニメーションのシナリオ "@keyframes"ですね "@keyframes"と "s"がつきますのでご注意ください そしてこの中は"from"どこから 中括弧始まり 中括弧閉じです どこどこへ"to"ですね 中括弧始まり 中括弧閉じと もう最初に売っておきましょう 何をアニメーションさせたいかというと この影でした ですからその影の設定を コピーしてしまいましょう そして"from"の方はここらかですので このままペーストします ちょっとインデントがずれましたけど インデントを調整して 同じくこれを"to"の方にもコピーします ペーストします さてこのままでは"from"と"to"が 同じ設定なので意味がありません "from"はこのままでいいのですが "to"の方を変えましょう それからもうひとつ こちらからの設定はいらなくなりますので アニメーションの方で 既に設定することになりますから "*/"しておきます そして"keyframes"の後に この名前をコピーします ペーストです "from"はこれでいいわけですから "to"の方ですね影をだんだん縮めます しかもアルファも落としていくと 透明にしていく ということにしますので 影を縮めるのでここは ずれがなくなりますので0ですね ぼけ幅も0になります rgbaアルファは やはり0 どんどん透明になりながら縮んでいく というアニメーションになります 文字の方も少し変えておきましょう アルファだけ アルファを0.2にしておきます これで一旦保存して確認しましょう ファイルメニュー [ブラウザでプレビュー]で[Google Chrome]です アニメーションしました もう出てきませんね デフォルトでは一回アニメーションしたら終わりです ですからもう一回見たかったら [リロード]するということになります また[リロード]します 手でやっていると大変なので 無限に繰り返すように 設定し直しましょう ということで Dreamweaverに戻ります アニメーションプロパティの設定を加えます 時間のあと どんなふうに値を変えるかという 関数を指定します 省略してもかまわないのですが この関数をいくつか試してみたいので 入れておきます デフォルトは"ease"という 少し加速をしながら 最後に減速をするのですが 典型的なのは"linear"があります 直線的ですね 普通に機械的に変わっていくと というのが"linear"です そして無限に繰り返したいということなので 無限は"infinite" ということになります これでいちいち[リロード]しなくても アニメーションが確認できます 一回保存して [ブラウザでプレビュー]しましょう 一回で終わりません 無限に続くことになります 3秒にましたので 少し遅い感じもしますが これも直しましょう 他の設定もしたいと思いますので またDreamweaverに戻ります アニメーション設定をまた追加します 時間は1秒に設定しましょう 行ったり来たりという 往復のアニメーションにしたいと思います その場合には"alternate"という 指定をします これでアニメーションが行ったり来たり ブランコの様に変化すると言えますね ではファイルを保存して 確認したいと思います [ブラウザでプレビュー]です 消えてったものがまた出っ張ってくると 往復をするアニメーションになりました 現在ここでは"linear"な 設定になっています アニメーションの値の変え方は "linear"です ちょっと設定を変えてみましょう 区別がつきにくいですが もう一度Dreamweaverに戻ります 値の変化を設定する関数 タイミング関数といいますが "linear"になっていますがこれを変えます ease-in-out これは加速と減速が加わったものです こうするとどうなるのか もう一度保存して 確認してみます [ブラウザでプレビュー] [Google Chrome]です 変化がわかるでしょうか これが先ほど"linear"の場合ですね こちらが"ease-in-out"です ブランコの様に 加速減速がついているのがわかるでしょうか ではレッスンをまとめましょう このレッスンでは アニメーションプロパティを使って テキストのアニメーションを行いました アニメーションプロパティの設定というのは "animation"というプロパティ名の後に アニメーション 名前 時間 値を変化させるタイミング関数 それから 回数 方向 という指定になります そしてこの名前を付けた "@keyframes"規則というのは "from"プロパティをどういう状態から "to"どういう状態に変えるのか 設定すればいいということでした

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

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

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

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

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

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