Как можно через JS или jQuery увеличивать св-во animation-delay, для каждого последующего элемента. Приведу пример:
<div class="wrapper">
<div class="c1 animated fadeInScale"></div>
<div class="c2 animated fadeInScale"></div>
<div class="c3 animated fadeInScale"></div>
<div class="c4 animated fadeInScale"></div>
</div>
<style>
.animated.fadeInScale.c1 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.animated.fadeInScale.c2 {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.animated.fadeInScale.c3 {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.animated.fadeInScale.c4 {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
</style>
Вместо того чтобы засорять css-файл созданием одних и тех же конструкций, хотелось бы сделать тоже самое, но программным путем. Как это можно сделать?