ニースフェードエフェクトを作成するCSS3トランジション
ウェブデザイナーは、CSS3が現れたときに作成していたページをもっと制御したいと望んでいました。 CSS3で導入された新しいスタイルは、 Web専門家にPhotoshopのような効果をページに追加する機能を与えました。 これには、 ドロップシャドウやグロー 、丸みのあるコーナーなどのプロパティが含まれていました。 CSS3では、アニメーションのようなエフェクトも導入されており、サイトでのインタラクティブ性を高めることができます。
CSS3を使用してウェブサイト内の要素に追加できるビジュアルエフェクトは、 不透明度とトランジションのプロパティの組み合わせを使用してフェードイン/フェードインさせることです。 これは、サイト訪問者が何かをしたときに、その要素の上にホバリングするような、ぼやけた領域を作成することによって、ページをよりインタラクティブにする簡単で十分にサポートされた方法です。
このインタラクティブなビジュアルエフェクトをWebページのさまざまな要素に追加するのがどれほど簡単かを見てみましょう。
ホバーで不透明度を変更する
まず、顧客がその要素にマウスを乗せたときに、画像の不透明度を変更する方法を見ていきます。 この例では（私は下にHTMLを示しています）、greydoutというクラス属性を持つ画像を使用しています。
グレー表示にするために、CSSスタイルシートに次のスタイルルールを追加します。
.greydout {
-webkit-opacity：0.25;
-moz-opacity：0.25;
不透明度：0.25;
}
これらの不透明度設定は25％に変換されます。 これは、画像が通常の透明度の1/4で表示されることを意味します。 完全に透過的であるのに対して、透明でない完全に不透明は100％であり、0％は完全に透明である。
次に、マウスを上に置いたときに画像が透明になるように（またはより正確には、完全に不透明になるように）するには、：hover擬似クラスを追加します。
.greydout：ホバー{
-webkit-opacity：1;
-moz-opacity：1;
不透明度：1;
}
これらの例では、以前のバージョンのブラウザとの下位互換性を保証するため、ベンダーのプレフィックス付きバージョンを使用しています。 これは良い習慣ですが、現実には、不透明度の規則がブラウザでうまくサポートされており、これらのベンダーのプレフィックス行を削除することはかなり安全です。 それでも、古いブラウザのバージョンを確実にサポートしたい場合は、これらの接頭辞を含めない理由もありません。 宣言を通常の接頭辞なしのスタイルで終了させるという、受け入れられているベストプラクティスに必ず従ってください。
これをサイトに展開した場合、この不透明度の調整は非常に急激な変化であることがわかります。 最初は灰色で、それ以外は暫定状態ではありません。 これはライトスイッチのようなものです。オンまたはオフです。 これはあなたが望むものかもしれませんが、より緩やかな変化を実験したいかもしれません。
本当に素晴らしいエフェクトを追加し、このフェードを段階的にするには、.greydoutクラスにtransitionプロパティを追加します：
.greydout {
-webkit-opacity：0.25;
-moz-opacity：0.25;
不透明度：0.25;
-webkit-transition：すべての3秒間の操作が簡単です。
-moz-transition：すべての3秒が楽になる。
-ms-transition：すべての3秒が簡単です。
-o-transition：すべての3秒が楽になる。
トランジション：すべての3秒を楽にする。
}
このコードでは、変更は急激に切り替えるのではなく、徐々に移行します。
もう一度、ここでベンダーのプレフィックスルールを使用しています。 遷移は不透明度と同様にサポートされていないので、これらの接頭辞は理にかなっています。
これらの相互作用を計画する際に覚えておかなければならないことの1つは、タッチスクリーンデバイスは「ホバー」状態を持たないため、携帯電話のようなタッチスクリーンデバイスを使用している人はこれらの効果を失うことが多いことです。 移行はしばしば起こりますが、実際には見られないほど速く起こります。 これを素晴らしいボーナス効果として追加しても問題ありませんが、コンテンツを理解するために必要な変更は避けてください。
フェードアウトも可能です
退色した画像から始める必要はありません。完全に不透明な画像からは、トランジションと不透明を使用してフェードアウトすることができます。 同じイメージを使用して、フェードアウトのクラスでのみ：
class = "withfadeout">
前と同じように、：hoverセレクタを使用して不透明度を変更します：
.withfadeout {
-webkit-transition：すべての2-in-out;
-moz-transition：すべての2-in-out;
-ms-transition：すべての2-in-out;
-o-transition：すべての2-in-out;
トランジション：すべて2秒のイージーアウト。
}
.withfadeout：ホバー{
-webkit-opacity：0.25;
-moz-opacity：0.25;
不透明度：0.25;
}
この例では、画像は完全に不透明からやや透明に移行します。これは、最初の例の逆です。
イメージを超えて行く
これらのビジュアルなトランジションやフェードを画像に適用することは優れていますが、これらのCSSエフェクトで画像を使用するだけではありません。 クリックして保持すると消えるようなCSSスタイルのボタンを簡単に作成できます。 ：active擬似クラスを使用して不透明度を設定し、ボタンを定義するクラスにトランジションを配置するだけです。 何が起こるかを見るには、このボタンをクリックしてください。
上に置かれたりクリックされたりすると、基本的にどのような視覚的要素も消えることがあります。 この例では、divの不透明度と、マウスがその上にあるときのテキストの色を変更します。 ここにCSSがあります：
#myDiv {
幅：280px;
背景色：＃557A47;
色：#dfdfdf;
パディング：10px;
-webkit-transition：すべての4秒の緩和0秒。
-moz-transition：すべての4秒の緩和0秒。
-ms-transition：すべての4秒イージーアウト0;
-o-transition：すべての4秒イージーアウト0;
トランジション：すべての4秒イージーアウト0;
}
#myDiv：ホバー{
-webkit-opacity：0.25;
-moz-opacity：0.25;
不透明度：0.25;
色：＃000;
}
ナビゲーションメニューは、退色の背景色から利益を得ることができます
この単純なナビゲーションメニューでは、メニュー項目の上にマウスを置くと背景色がゆっくりと消えます。 ここにHTMLがあります：
- ホーム
- CSS3チュートリアル
- CSS3のプロパティ
そしてここにCSSがあります：
ul＃sampleNav {リストスタイル：なし; }
ul＃sampleNav li {
表示：インライン;
float：left;
パディング：5px 15px;
margin：0 5px;
-webkit-transition：すべて2s linearです。
-moz-transition：すべて2s linear。
-ms-transition：すべて2s linearです。
-o-遷移：すべて2s線形;
トランジション：すべて2sリニア。
}
ul＃sampleNav li a {テキスト装飾：なし; }
ul＃sampleNav li：ホバー{
背景色：＃DAF197;
}
ブラウザのサポート
すでに数回触れているので、これらのスタイルはブラウザのサポートが非常に優れているため、無邪気に使う必要はありません。 唯一の例外はInternet Explorerの古いバージョンですが、Microsoftの最近の決定ではIEのすべてのバージョンを11未満でサポートすることになりました。これらの古いブラウザは問題が少なくなりました。このフェードトランジションを参照してください。これは大きな問題ではありません。 このような種類のエフェクトを楽しいインタラクションに限定し、機能を駆動したり重要なコンテンツを表示したりしない限り、エフェクトをサポートしていない古いブラウザでは楽しさが低下しますが、ブラウザを使用するユーザーはその違いを知ることができます。特に、サイトを通常通り使用して必要な情報を入手できる場合は、
余分な楽しみ; 2枚の画像を入れ替える
ここでは、ある画像を別の画像にフェードする方法の例を示します。 HTMLを使用する：
もう一方は完全に不透明で、トランジションは2つを交換します。
.swapMe img {-webkit-transition：すべて1秒のイージーアウトです。 -moz-transition：すべて1秒の使いやすさ。 -ms-transition：すべて1秒の使いやすさ。 -o-transition：すべて1秒の使いやすさ。 トランジション：すべて1秒のイージー・イン・アウト。 } .swap1、.swapMe：ホバー.swap2 {-webkit-opacity：1; -moz-opacity：1; 不透明度：1; } .swapMe：ホバリング.swap1、.swap2 {-webkit-opacity：0; -moz-opacity：0; 不透明度：0; }