CSS3 анимации один за другим с задержкой

Question

Fiddle here -

У меня есть divs, что имеет некоторые CSS3 переход. Можно ли применить этот переход не для каждого элемента одновременно, например, с 100ms delay после каждого другого элемента?

#main div { 
    opacity: 0; 
    transition: 1s opacity; 
} 

#main.active div{ 
    opacity: 1; 
} 

Так что, когда я добавлю .active класс #main, его дети будут изменять его непрозрачность не сразу, а один за другим?

Я знаю, что это может быть сделано с Исли

$('.setOfItems').each(function(i){ $(this).delay(100*i).doSth() })

Но я ищу только CSS3 решения.

Answer 1

Вы можете использовать собственность transition-delay. подробнее об этом here, or here

Проверить эту Working Fiddle

, установив Поменяй задержку различных элементов, они будут появляться в разное время. , но CSS будет выглядеть беспорядочным, если вы установите множество разных классов с разными задержками, поэтому вы должны применить задержку от скрипта (в соответствии с тем, что вы предложили в своем вопросе).

, если у вас есть небольшое и постоянное число элементов, вы можете сделать это уродливый путь (опять же: лучший способ это через скрипт)

#main div:first-child 
{ 
    transition: 1s opacity 200ms; /*BTW this is the short way of using transition with the duration, property, delay*/ 
} 

#main div:nth-child(2) 
{ 
    transition: 1s opacity 400ms; 
} 

#main div:nth-child(3) 
{ 
    transition: 1s opacity 600ms; 
} 

etc.. 

Answer 2

Существует способ, но он не полностью поддерживается, пожалуйста, посмотрите на keyframes.

Затем вам нужно будет создать каждый элемент другого класса.