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

テキストを加えてアニメーションさせる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
テキストを加えて、すでに定めたアニメーションを適用したうえで、調整します。
講師:
04:08

字幕

このレッスンでは すでに作ってある text の animation その CSS を使って text を増やし animation する文字も 加えてみたいと思います text は2行ありますけれども この2行の text は 同じ CSS が割り当てられています どちらも光ったような 影が付いていますね それから1文字づつ 点滅の animation をしています これらも同じ CSS を使っていますので 点滅が同期していると 言う事が確認出来るでしょう この様な text を増やしてみたいと思います Dreamweaver で開いたのは まだ text が1行だけの html ドキュメントです でも animation の設定は すでに出来ています animation upper と 言う名前が @keyframes 規則に定められていて プロパティの状態は2つです 明るい文字と 暗い文字 それを keyframe を 細かく設定する事によって 点滅する様に見せています 現在の状態を確認しましょう ファイルメニューから ブラウザーでプレビューします text は1行だけ 1文字だけ点滅してますね うっすらと影で 光ってる様な効果が与えられています では この text の 行数を増やしたいと思います Dreamweaver に戻りましょう もう1行加える text は p 要素の class main も含めて基本的に 同じものを利用します ですからこれをコピーして 2行目に ペーストします 文字だけ打ち直しましょう animation する文字は 1文字なんですが 1文字の位置を 2番目にしました そして続きも打ち直して まずこれで確認しておきましょう ファイルを保存したら ブラウザーでプレビューします これだけで もう 半分出来上がった感じですね text が2行になりました 同じ設定です そして animation も同じ CSS の設定を使っていますので 同期していますけれども 文字の位置を変えました これをもうちょっと 細かく調整しましょう Dreamweaver に戻ります まず animation プロパティに 定めた 時間を 延ばします その変わり keyframe を さらに細かく設定しようと 言う事なんですが 暗くなる場合 これ 63% と かなり細かい間隔で決めました 次が 65% ですね その間の 64% をここに加えます 細かすぎる設定と 言えない事もないんですけど こうすると 63 64 65 と 恐らく コンマ 1 秒ぐらいの間隔で ちらっと点滅すると えー そう言ったものを animation の中に加えました では 言われてみないと わからないと思いますけれども この状態を確認しましょう ファイルを保存して ブラウザーでプレビューです ちらっと言う点滅が 加わっている事をご確認下さい もうちょっと後ですね ここです ちらっと えー 点滅しました Dreamweaver に戻って レッスンをまとめましょう このレッスンでは text を1行増やしました その時に class も全く同じにしましたので 基本的に同じ CSS の 設定を活かしています animation も共通です その animation に keyframe を 少しだけ付け加えました

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

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

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

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

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

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