入力時にCSSアニメーションを開始：チェック？

Question

私はこのSliding Image Panels with CSS3チュートリアルを行っており、:checkedを使用してアニメーションを開始すると少し問題に遭遇しました。ここにはofficial demoがあり、これはis my take（今はウェブキットとモジラ）です。

画像はクリックで変更されますが、パネルはスライドせず、最初のページロード時にスライドします。これはCSSが指示しているようです。

乾杯。

Answer 1

あなたがこれを不足している：

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

Answer 2

申し訳ありませんが、それは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), { 
 

これにより、宣言ブロック全体が無効になる。