Можно ли использовать значение Nth-Child в качестве параметра в свойстве? (и как) ⇐ CSS

[Anonymous]

Краткое описание (tl; dr;)

Существует ли «чистый CSS» способ (не меньше/sass) использования значения nth-Child внутри свойств CSS? Что -то вроде этого: < /p>

span.anim:nth-child(N) { animation-delay: N * 0.5s; }
< /code>

Если есть, как я могу это сделать? Если нет, как я мог имитировать это чисто? (Я уверен, что я переполняю здесь вещи) < /p>



длинное описание < /h2>

Я создавал простую анимацию, в которой буквы исчезают во время вращения. Для этого я использовал комбинацию JavaScript (с jQuery) и CSS, но это создало некоторые проблемы (см. Ниже); Поэтому я попытался перейти к решению только для CSS, и это закончилось большим количеством правил.span.anim {
font-size:30px;
opacity:0;
animation: anim 1s;
animation-fill-mode: forwards;
}

@keyframes anim {
from {
transform: rotate(0deg);
opacity:0;
}
to {
transform: rotate(360deg);
opacity:1;
}
}
< /code>

Использование Javascript + css < /strong> < /p>

Мой код Javascript выглядит так: < /p>

var aux = $("#animate").text();
$("#animate").text("");

for (var x = 0; x < aux.length; x++) {
setTimeout('$("#animate").append("' + aux[x] + '")', 500 * x);
}
< /code>

Это отлично работает ... если только пользователь не перемещается на другую вкладку, то анимация не испортится, и результат неожиданно. Вы можете увидеть это на этом jsfiddle: http://jsfiddle.net/e7b9ygk4/ (запустите скрипт, перейдите к другой вкладке и возвращайтесь назад через несколько секунд).

с использованием только css

Я могу достичь элементов, которые можно получить, так же. Часть, которую я чувствую, я чрезмерно завершаю), а затем применяю анимацию к каждому элементу с другой задержкой: < /p>

span.anim:nth-child(1) { -webkit-animation-delay:0.5s; }
span.anim:nth-child(2) { -webkit-animation-delay:1.0s; }
span.anim:nth-child(3) { -webkit-animation-delay:1.5s; }
span.anim:nth-child(4) { -webkit-animation-delay:2.0s; }
span.anim:nth-child(5) { -webkit-animation-delay:2.5s; }
span.anim:nth-child(6) { -webkit-animation-delay:3.0s; }
span.anim:nth-child(7) { -webkit-animation-delay:3.5s; }
span.anim:nth-child(8) { -webkit-animation-delay:4.0s; }
span.anim:nth-child(9) { -webkit-animation-delay:4.5s; }
span.anim:nth-child(10) { -webkit-animation-delay:5.0s; }
span.anim:nth-child(11) { -webkit-animation-delay:5.5s; }
span.anim:nth-child(12) { -webkit-animation-delay:6.0s; }
span.anim:nth-child(13) { -webkit-animation-delay:6.5s; }
span.anim:nth-child(14) { -webkit-animation-delay:7.0s; }
span.anim:nth-child(15) { -webkit-animation-delay:7.5s; }
span.anim:nth-child(16) { -webkit-animation-delay:8.0s; }
< /code>

Это работает отлично, даже если пользователь перемещается на другую вкладку, но это приводит к большому количеству ненужного кода < /em> (как HTML, так и CSS, хотя он может быть упрощен с использованием JavaScript). Вы можете увидеть, как он работает над этим JSFIDDLE: http://jsfiddle.net/f5my3sm1/.образно />span.anim:nth-child(N) { animation-delay: N * 0.5s; }


Подробнее здесь: https://stackoverflow.com/questions/289 ... ty-and-how