css - 在输入 :checked? 上启动 CSS 动画

Question

我已经做到了 Sliding Image Panels with CSS3教程，并在使用 :checked 启动动画时遇到了一个小问题。这是 official demo ，还有这个 is my take (现在是 webkit 和 mozilla)。

图像在点击时发生变化，但面板不会滑动，而是在初始页面加载时滑动，这似乎是 CSS 告诉它要做的……有什么想法吗？

干杯。

Answer 1

抱歉，是 PEBCAK。

我在末尾留下了一个尾随逗号，就像这样 - 看到末尾的那个小逗号了吗？坏我。

.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4), {

从而使整个声明 block 无效。