CSS3轉換延遲與緩動

Question

我有一個奇怪的問題，我想不出（尋找2小時的解決方案現在）。
我使用滑塊，當選擇幻燈片時顯示標題（H3和p）。一切正常，除了在使用transition-delay屬性時遮蓋標題元素的不透明度。

在jsfiddle我已經設置了演示。當單擊下一個或上一個時，標題元素會顯示延遲，但不透明度緩動對於平滑過渡不起作用。

任何幫助appriciated :)

Answer 1

現在，這可能只是我誤解你正在嘗試做什麼，但它似乎是你錯誤地承擔過渡的繼承，以及使用不精確的選擇器。基本上，如果任何複選框被選中，則行#test input:checked ~ #full > .caption選擇.caption，即始終。

最後，你從來沒有真正告訴元素實際上動畫他們的不透明度。

通過重寫你的代碼，我想出了this這應該會更好一點。

作爲一個附註，你不應該使用重複id（#full），如果有的話，因爲它會打破Javascript，如果你嘗試訪問它。改爲使用空格分隔的類。