如何使用CSS給div標記淡入淡出效果使用CSS

我有一個Ul標記懸停它，我顯示一個div使用css。
現在我想的是div標籤將第一次淡入或類似動畫等
我知道它可以很容易地通過使用jQuery做，但想知道我能做到這一點使用HTML5，CSS3，CSS如何使用CSS給div標記淡入淡出效果使用CSS

任何其他影響Here JsFiddle

來源

2013-01-12 Satinder singh

淡入http://jsfiddle.net/thebabydino/Cedue/7/

從來沒有像-webkit-opacity或-moz-opacity

如果你想過渡的opacity，那麼任何事情無論是寫

transition: opacity 1s

或

transition: 1s

來源

2013-01-12 13:19:22 Ana

你的小提琴的作品，但沒有解決實際上導致他的問題（至少在我的Chrome版本）。你刪除了「display：none;」和「顯示：塊;」來自.hdshw，如果你從他的小提琴中刪除（例如：http://jsfiddle.net/Cedue/18/）實際上允許動畫。當然，您的動畫更漂亮，因爲您正確地轉換不透明度，並因此也正確地轉換文本，而僅刪除其上的顯示線會使背景動起來，並且文本立即出現。 – DRobinson

@ana：非常感謝你 –

我已經測試了鉻，firfox和它工作正常，但不是整型IE9？如果可能對IE瀏覽器有相同的效果 –

檢查此site，它使用CSS和JavaScript。

純CSS實現here。

來源

2013-01-12 12:53:13 CuriousMind

謝謝你的鏈接，我試過，但在我的情況下，必須對另一個標籤應用效果，imean懸停在ul上顯示一些效果的div標籤 –

將fade類應用於正在創建的div。 – CuriousMind

你應該看看CSS3過渡http://www.alistapart.com/articles/understanding-css3-transitions/

來源

2013-01-12 12:54:11 sjobe

感謝您的回覆，但這裏在我的情況下必須對其他標籤產生影響 –

您的JsFiddle鏈接僅顯示結果，而不是代碼。我看不到你在做什麼 – sjobe

Jsfiddle鏈接工作，你可以看到CSS，HTML那裏 –

從我可以告訴，從你的代碼去除display: none;和display: block;線使動畫： http://jsfiddle.net/Cedue/31/

（也就是你原來的小提琴只顯示一個副本：行刪除）然而，這會引發您隱藏文本時可以訪問，突出顯示甚至懸停的問題;如果你不希望有這種行爲，你可能希望查看另一種隱藏它的方法，直到正確的區域被徘徊，例如用邊距來移動它。

正如Ana所提到的，如果您希望爲整個淡入淡出設置動畫效果，您應該使用不透明度作爲您的轉場參數（例如：transition: opacity 1s ease;，其他行支持單獨的瀏覽器）。如果您在示例中使用背景作爲過渡屬性，則只有背景會消失，文本會立即顯示。

編輯：由於我自己的好奇心，我在Chrome和Firefox下測試了這個，每個都適用於Windows和Mac，並且可以確認刪除display行會導致動畫在所有這些行上都能正常工作。

來源

2013-01-12 21:09:30 DRobinson

非常感謝 –

如何使用CSS給div標記淡入淡出效果使用CSS

回答

相關問題