在输入上启动CSS动画:选中?

时间:2012-01-28 21:11:04

标签: css css3

我已完成此Sliding Image Panels with CSS3教程,并在使用:checked启动动画时遇到了一个小问题。这是official demois my take(现在是webkit和mozilla)。

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

干杯。

2 个答案:

答案 0 :(得分: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), {

从而使整个声明块无效。

答案 1 :(得分:0)

你错过了这个:

.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) {
    -moz-animation: 0s ease 0s normal none 1 none;
    -moz-transition: left 0.5s ease-in-out 0s;
    left: 0;
    z-index: 10;
}