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

アニメーションの変化を細かく定める

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
キーフレームを加えることにより、アニメーションの変化を細かく定められます。
講師:
04:27

字幕

このレッスンでは animation の時間間隔を少し 細かく調整してみます 今画面に出ているこの i の文字 点滅を繰り返しているんですが 機械的な時間じゃありませんね 少し今長く出てました すぅっーと消えて  すぅっーと出てくる 次はいきなりパッと消えて パッと出てくると 言う風に 少しづつ 時間間隔をずらしてあります その設定の仕方について学びましょう Dreamweaver で開いたのは まだ単純な animation の設定しかしていない html ドキュメントです animation はまず animation プロパティで定めます そして その名前を @keyframes 規則で 細かい animation 設定を する訳ですが 0% このプロパティ設定から 100% このプロパティ設定に変えましょうと言う 始めと終わりだけが設定されています ではこれを確認してみましょう ブラウザーでプレビューします まだ 始めと終わりだけしか 設定していませんので だんだん だんだん消えてって出てくる だんだん だんだん消えてって出てくるという ごく単純な動きになっています この 出てくる動きを または 消える動きですね 細かく調整してみたいと思います Dreamweaver に戻りましょう animation する プロパティの設定自体は 完全に明るい状態と 暗い状態 消えた状態ですね この2つだけを使う事にします 但し この2つの間を 細かく行き来すると 言う感じになります パーセンテージで指定していると その点が良くて 例えばここを20%とします そうすると 始まってから 20% 時間が経過すれば こちらに来ます 戻りましょう ということで ここは今度 カンマ区切りで 100% とします そうすると2割の時間で まず 完全に明るい状態から暗くなり 次は8割の時間で だんだん明るくなると そんな動きになる訳です 確認しましょう ファイルを保存して ブラウザーでプレビューします 最初はすぐ消えます でも 次はしばらく出てますね と言う風に 最初に消える状態と 出てきてしばらく留まるという この2つの時間間隔が 少し変わったと言うことが お分り頂けるかと思います では もうちょっと細かく設定しましょう Dreamweaver に戻ります このパーセンテージで定められた プロパティの設定の事を keyframe と呼びます ですから 今は 0% と 20% と 100% 3つのkeyframeが定められていると 言う事になります keyframe を増やしましょう 20% で暗くなるんですが すぐに明るくなりますと言う事で 22%とします そしたら今度は では少し間隔を置いて 65% でまた暗くなります さらにその後今度は 70% ですぐに明るくなると こんな風に設定してみました そうすると70% の後 こっちに来る時間はないですね と言う事なので 70% から 100% までは この状態が 明るい状態が キープされる事になります 確認しましょう ファイルメニューで保存して ブラウザーでプレビューします 細かく変化しますのでご覧ください どうでしょうか しばらく出てますね すっと消えて 一回出てきたら しばらく 70% から 100% の所で 明るい状態がキープされています こう言う風にすると細かいkeyframe で プロパティの設定を 色々 animation 間隔を変える事が出来ると言う事です このレッスンでは animation プロパティの設定の中の 特に @keyframes 規則 そこでパーセンテージ keyframe を いくつも細かく加える事によって animation する時間間隔が 様々に変えられると言う事を ご説明しました

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

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

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

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

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

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