带缓动的 CSS3 过渡延迟

Question

我遇到了一个我无法弄清楚的奇怪问题（现在搜索了 2 个小时的解决方案）。
我正在使用滑块，选择幻灯片时显示标题（H3和P）。使用 transition-delay 属性时，除了标题元素上的不透明度缓入外，一切正常。

在jsfiddle 我已经设置了一个演示。单击下一个或上一个时，字幕元素会延迟显示，但它们的不透明度缓和不适用于平滑过渡。

任何帮助 :)

Answer 1

现在，这可能只是我误解了您要执行的操作，但您似乎错误地假设了转换的继承，以及使用了不精确的选择器。基本上，如果选中任何复选框，则#test input:checked ~ #full > .caption 行会选择 .caption，即总是。

最后，您永远不会真正告诉元素实际为它们的不透明度设置动画。

通过稍微重写你的代码，我想出了this，它应该会更好一些。

附带说明一下，如果有的话，您不应该使用重复的 ID (#full)，因为如果您尝试访问它会破坏 Javascript。请改用空格分隔的类。