Инициировать CSS анимацию при вводе: проверено?

Question

Я сделал это Скольжение панелей изображений с помощью учебника CSS3 и столкнулся с небольшой проблемой при использовании :checked для запуска анимации.Вот официальная демоверсия , и этот - мой дубль (пока что 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), {

, что делает весь блок объявлений недействительным.

Answer 2

вам не хватает этого:

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