在輸入上啓動CSS動畫：檢查？

我已經完成了這個Sliding Image Panels with CSS3教程，並且遇到了使用:checked啓動動畫的一個小問題。這裏是official demo和is my take（現在是webkit和mozilla）。在輸入上啓動CSS動畫：檢查？

圖片在點擊時發生變化，但面板不會滑動，而是在初始頁面加載時滑動，這似乎是CSS告訴它做的事情......任何想法？

乾杯。

來源

2012-01-28 Eystein

你缺少這樣的：

.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; 
}

來源

2012-01-28 21:17:38 19greg96

感謝您的快速回答。它使我找到了解決方案 - 我沒有錯過那個部分，但是因爲一個額外的逗號而無效。 – Eystein 2012-01-28 21:45:55

對不起，這是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), {

從而使整個聲明塊無效。

來源

2012-01-28 21:38:30 Eystein

在輸入上啓動CSS動畫：檢查？

回答

相關問題