CSS3 увеличивает эффект задержки?

Question

У меня есть неупорядоченный список:

<ul> 
    <li>Apple</li> 
    <li>Monkey</li> 
    <li>Sun</li> 
    <li>Moon</li> 
    <li>Movies</li> 
</ul> 

И масштаб анимации:

ul li { 
    animation   : scale-in 1s; 
} 

@keyframes scale-in 
{ 
    0% { 
     opacity    : 0; 
     -webkit-transform : scale(0.5); 
    } 
    20% { 
     opacity    : 0; 
     -webkit-transform : scale(0.5); 
    } 
    100% { 
     opacity    : 1; 
     -webkit-transform : scale(1.0); 
    } 
} 

Теперь я люблю задержку каждого элемента, чтобы быть 1 второй друг от друга. Итак, первый элемент появляется сразу, вторая задержка 1 с, вторая задержка в 2 секунды и т. Д.

Есть ли опрятный способ сделать это, возможно, используя n-й селектор? или мне действительно нужно написать его, как ul li:nth-child(1) { delay : 1s; } ul li:nth-child(2) { delay : 2s; }

Answer 1

Невозможно сделать это с помощью CSS3, кроме того, как вы предложили. Поскольку нет никакого реального способа делать математику или перебирать вещи, это не совсем возможно, кроме как написать ее вручную.

Я должен был бы предложить второе предложение NightCracker JS. Вам не обязательно обязательно писать анимацию с помощью JS, но вы можете запустить ее с помощью JS. Что-то простое, как использование цикла While с инкрементным счетчиком, должно сделать трюк.

В конце концов, вы просто сохраняете несколько строк кода и просто записываете его в CSS. Функциональность была бы такой же, особенно если кросс-браузерная совместимость не вызывает беспокойства.