CSS3 увеличивающий эффект задержки? - PullRequest
Новая
       5

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

2 голосов
/ 25 марта 2012

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

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

1 Ответ

2 голосов
/ 25 марта 2012

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

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

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

...