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

画像をクロスフェードさせる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
transitionプロパティで画像の_x001C_不透明度を変えることで、クロスフェードが表現できます。
講師:
07:43

字幕

このレッスンでは フォトギャラリーの 画像の切り替えに アニメーションを加えます 切り替えるときに 次の画像が だんだん だんだん 透明から不透明に 変わると共に 前の画像は逆に 透明に変わっていきます それが同時に おこなわれるので クロスフェードという 言い方をします その クロスフェードの効果を 加えてみましょう Dreamweaverで 開いているのは まだ 画像切り替えの アニメーションが 加わる前の HTMLドキュメントです body要素を見ると div要素 idが galleryです その中に 画像のimg要素と ボタンのリストがあります そして そのリストの a要素には href属性に ナンバー01からの連番の ターゲットが 加えられています そして同じ名前が今度は img要素のid属性に それぞれ設定されています そこでクリックしたボタンの hrefの ターゲットと同じid属性を持つ 画像を探し それを切り替えると そういう仕組みのCSSが 設定されています ではCSSの方を 確認しましょう idがgalleryの img要素 ここで始め アルファという 言い方もしますけれども opacity 不透明度が 0になっています つまり 最初は まったく見えません ところが クリックすると そのクリックしたボタンの ターゲットとなる それと同じ名前のid属性を持つ イメージ要素を探し そのイメージ要素だけは 完全に 不透明にします そうすることによって クリックしたボタンに対応した イメージ 画像だけを 表示しています 確認してみましょう ファイルメニューから ブラウザーでプレビュー をします Google Chromeで 開きます 最初は 何も 表示されていません クリックすると そのボタンに対応した ターゲットと 同じid属性を持つ 画像が表示されます ただしアニメーションは 加わっていませんので 瞬時に 切り替わっています アニメーションは transitionプロパティで 設定することができます 今画面ではMDNの CSSリファレンスの transisionの項目を 開いています 構文を見てみましょう 構文は 4つの値を 設定します まず最初のひとつは 何もつけず 省略するかあるいは アニメーションさせたい プロパティを指定します 2番目は アニメーションにかける時間 3番目は 値の変化のさせかたを 定める関数 そして最後が アニメーションを開始するのに 待つ時間です 「遅れ」という 言い方もします これらのプロパティは それぞれ個別に設定する ということもできて この4つが 個別に設定するプロパティです まず アニメーションをさせたい プロパティというのは transition-propertyです デフォルト値は すべてのプロパティ all ということに なっています 次に アニメーションを させるための時間 これは transition-duration デフォルトでは0です もっとも0では アニメーションをする意味がありませんので 最低限この値は 設定した方が良いでしょう 次に アニメーションを させるための 変化のさせかたは transision-timing -function これには 関数がいくつか キーワードで 設定されています その中の easeというのが デフォルトの関数です だんだん加速しながら 最後の方で だんだん減速する という変化をします そして最後 遅れは transition-delay ということで 遅れがまったくない 0秒というのが デフォルト値になっています Dreamweaver の方に戻って transitionプロパティ を定めます galleryのimg このセレクターに対して transition そしてまず 変化させたいプロパティは allにしておきましょう そして時間は 最初はちょっと長めに1秒 1sです そして関数はease という関数にします 最後 遅れはなしにしたいので 0sです これでいったん保存して ブラウザで確認します [ブラウザーでプレビュー]です 最初は出ていません クリックすると 1秒かけて じわっと出てきます 今度はすでに 写真が出てますので この写真は1秒かけて 消えていくと共に 次の写真が じわっと現れる クロスフェード という効果ですね このように 設定することができました もう1度Dreamweaverの方に 移りましょう transitionプロパティは 4つの値を すべて設定しました けれども最初のall これは省略してもいいと いうふうに申し上げました 省略すれば allと同じことになります デフォルト値が all ですから それから秒数は 入れないといけないんですけども 後のところの関数のease それから遅れの 「0s」0秒 こちらも デフォルト通りですから 省略してしまって 構いません 時間はちょっと 短めにしましょう 0.5としまして もう1度保存して 確認してみます ブラウザーで プレビューをしましょう では クリックすると 先ほどよりちょっと 切り替えが早くなります でもちゃんと アニメーション クロスフェードしていますね では 確認が できましたので また Dreamweaverの方に 戻ります クロスフェードの アニメーションは これでできたんですけれども 最初に 何も写真が出ていない というのは ギャラリーとして いかがなものか という感じがいたしますね ですから最初に 最初の写真 ナンバー01を 出したいと思います ですのでopacity 1 にするのは ターゲット だけでなくて それに加えて カンマで改行します やはり galleryの 中のイメージ要素の さらにナンバー01ですね これは 最初 出しておく という設定にしておきましょう 改めて 確認します 保存をして ブラウザでプレビューします 最初にちゃんと 写真が出ています ですから最初の ボタンをクリックすると これは 変わりませんね ふたつめ以降の ボタンを押すと クリックで 写真が変わります そして5番目が表示された この状態からでしたら 1番目を押せば 1番目の画像が 出てきます このレッスンでは transition プロパティを使って 画像の切り替えを クロスフェードの アニメーションにしました 設定する値は 4つです 対象のプロパティと それから アニメーションにかける時間 変化のしかたの タイミング関数 そして最後が 遅れです これらは それぞれ transition-propertyで まず対象ですね それから transition-duration で時間です transition-timing -function で変化のしかた デフォルトはease 最後に遅れは transition-delay というプロパティで 個別に設定することができました

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

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

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

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

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

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