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

transitionプロパティで要素のプロパティをアニメーションさせる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
transitionプロパティで要素のプロパティ値を決められた時間で変化させます。アニメーションとしての表現が高まります。
講師:
05:03

字幕

このレッスンでは プロパティの値を 少し時間をかけて変化させる アニメーションですね その アニメーションの機能を持った transitionと言う プロパティについてご説明します このボタン マウスインターアクションで カラーが変わったり 影が 伸び縮みするんですけれども 良く見て下さい ポインタを重ねた時に じわっと 色が変わって 影が すうっと縮みますね クリックした時も同様です もうちょっと 良く見て下さい マウスボタンを放します それから 外に 出します 言われないと 分からないかも知れません けれど このアニメーションの 設定を transitionプロパティを 設定していないものと比べてみると 分かりやすいかと思います この Dreamweaver で開いた stm ドキュメントはすでに ボタンのカラーや 影 と言った設定はしてあります けれどもまだ アニメーション については 設定がしてありません これが どんな状態になるか 確認してみましょう ファイルメニューから ブラウザーでプレビューします Google Chrome です マウスボタンにポインターを重ねると カラーが変わります 押します 放します 出します かなりキビキビしてますね 先ほどの ウィンドウ まだ開いていますので 切り替えて 比べて見ましょう 重ねた時の状態で じわっと 変わるのが 分かって頂けるでしょうか 押します 放します それから ボタンの外にポインタを出します この設定を 先ほどの stm ドキュメントに行って行きます では Dreamweaver に切り替えましょう 先ほどの ボタンの影 あるいは カラーと言うのは セレクターで言うと dtn というクラスの a 要素 に設定した カラーであるとか 影を変えたい訳ですから この中に transitionのプロパティを追加します プロパティ名は transition と どんな値を設定するのか リファレンスで 確認しておくことにしましょう MDN mozilla デベロッパネットワークの CSS レファレンスです 新しい項目を覚えた時は できれば リファレンスを見て頂くと より知識が深まりますし あるいは そのついでに 別の事を覚える と言う事もあります transitionというのは ここにありますね これは 実験段階の機能です つまり まだ草案段階なんですけれども 各ブラウザーにはすでに 実装がされていますし ベンダープレフィクスを付けさえすれば 機能は使うことができます では どんなシンタックスに なっているかと 言うと ここです 構文 結構 たくさんありますね けれど 多くのプロパティでは デフォルトが決まっていて 全部を指定しなくても 省略することができます transition の場合もそうで 今回は その アニメーション 変化する 時間だけ 指定することにします 時間は単位 秒であれば s をつければ 数字に s ですね えー それで アニメーションさせることが出来ます では Dreamweaver の方に 戻って行きましょう transition プロパティに 時間を指定します 秒数です 最初 解りやすく 少し長めにしましょう 2秒と言うことで 2s 保存をします そして ブラウザーでプレビューをします Google Chrome です マウスポインターを重ねてみましょう 今度は分かりますね じわっと変わってます マウスボタンを押しました 放します 外に出します ただ 実際のボタンとしては これちょっと トロ過ぎですので えー もうちょっとちゃんとした 値に変えたいと思います では えー ブラウザーから Dreamweaver に戻りましょう transition の アニメーションの時間は 2秒も入りません  1秒さえ入りませんので ここは 0.5秒としておきます 一応 結果を確認しておきましょう 保存をした上で ブラウザーでプレビューします 今度は だいぶ速く変わりますけど もうそろそろ 目が慣れてきたと思います 重ねた時 押した時 じわっと変わるのが お分り頂けたかと思います このレッスンでは transition と言うプロパティで 値を 線化を アニメーションさせると 言うことを ご紹介しました transition と言うプロパティ自体は 指定できる値は 結構多いんですけれども まあ 最低限と言う事では 時間を指定すれば その 時間で アニメーション プロパティの値がじわじわと 変わって行くと 言う事になります これで だいぶ表現力が高まってくるでしょう

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

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

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

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

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

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