背景をフェードイン/アウトする

CSS3を使用してフェードイン/アウトを行う方法はありますか？白い背景に<div>？コンテンツは表示されたままにして、背景だけが消えるようにする必要があります。背景をフェードイン/アウトする

css3トランジション/トランスフォームを使用するアイデアはありますか？

ご協力いただきありがとうございます。

あなたが画像と背景色の例については、これは便利かもしれません

2011-10-01 cmplieger

確かに、あなたはbackground-colorに直接transition propertyを使用することができます。

div { 
    background-color: white;  

    /* transition the background-color over 1s with a linear animation */ 
    transition: background-color 1s linear; 
} 

/* the :hover that causes the background-color to change */ 
div:hover { 
    background-color: transparent;  
}

がここ:hoverにフェードアウト赤い背景のan exampleです。

出典

2011-10-01 20:41:36 Pat

実際に背景色をアニメーション化できるかどうかは分かりませんでした。 – Husky

@Huskyトランジションは非常に優れていますが、ブラウザ固有のプレフィックスをすべて削除できるのが楽しみです。 – Pat

あなたはLESS/SASSを使用し、そこでミックスインを使用することができます。多くのCSS3のプロパティを使用している場合、少なくともそれは耐え難いです。 – Husky

がフェード： - http://nettuts.s3.amazonaws.com/581_cssTransitions/demos.html

しかし、それをサポートしていないブラウザへの影響を制限するの移行を行うためにCSS 3を使用しました。

出典

2011-10-01 20:40:45 KryptoniteDove

非常に良いアプローチ、良い指導のために+1 – doniyor

divsは、1つのコンテナdivに2つ含めることができます。最初のdivは白い背景を含み、2番目のdivは内容を取得します。

次に、CSS3トランスフォームを使用して、最初のdivの不透明度をゼロにアニメーション化します。

出典

2011-10-01 20:42:53 Husky

提案をいただきありがとうございます。私は最終的にdivに2番目の色（つまり白）をbackground-colorとしてインラインに設定しました。遷移プロパティと同様に – Frank

背景をフェードイン/アウトする

答えて

関連する問題