Add animation delay to li automatically

Question

I have a slideshow with CSS3 which have animation-delay in each child, but this is not dynamic because for each tag I should add nth-child ,

Is there any way to add animation-delay automatically to li tags?

this is CSS code:

.cb-slideshow li:nth-child(2) span {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
}

.cb-slideshow li:nth-child(3) span {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
}

.cb-slideshow li:nth-child(4) span {
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  -o-animation-delay: 18s;
  -ms-animation-delay: 18s;
  animation-delay: 18s;
}

.cb-slideshow li:nth-child(5) span {
  -webkit-animation-delay: 24s;
  -moz-animation-delay: 24s;
  -o-animation-delay: 24s;
  -ms-animation-delay: 24s;
  animation-delay: 24s;
}

.cb-slideshow li:nth-child(6) span {
  -webkit-animation-delay: 30s;
  -moz-animation-delay: 30s;
  -o-animation-delay: 30s;
  -ms-animation-delay: 30s;
  animation-delay: 30s;
}

I want to change this code to add 6s delay to each tags.

Possible duplicate of [CSS Animations with delay for each child element](https://stackoverflow.com/questions/8294400/css-animations-with-delay-for-each-child-element) — Ismail Farooq, Dec 08 '17 at 10:07
@IsmailFarooq Answers of that question can't solve my problem. — MajAfy, Dec 08 '17 at 10:34
read the top voted answer this is not possible without js u can decrease amount of repetition with sass but u can't handle it dynamically — Ismail Farooq, Dec 08 '17 at 11:06
but only one way you can do this is inline style check my answer — Ismail Farooq, Dec 08 '17 at 11:12

Ismail Farooq · Answer 1 · 2017-12-08T11:20:37.977

There is no way to handle it dynamically except adding inline style dynamically or with javascript

for example

.cb-slideshow li {
  animation: FadeIn 1s linear;
  animation-fill-mode: both;
}

@keyframes FadeIn {
  0% {
    opacity: 0;
    transform: scale(.1);
  }
  85% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

<div class="cb-slideshow">
  <li style="animation-delay: 1s;">test text</li>
  <li style="animation-delay: 2s;">test text</li>
  <li style="animation-delay: 3s;">test text</li>
  <li style="animation-delay: 4s;">test text</li>
  <li style="animation-delay: 5s;">test text</li>
</div>

score 0 · Answer 2 · answered Dec 08 '17 at 10:12

0

You could use PHP to dynamically echo each part of the style, or intergrate it right into the css. For example

.button:hover {
    border: 10px solid;
    transition: <?php echo $lot ?>;
}

Where $lot is the animation time.

I dont know how to get the nth-child(N) in php, but there is undoubtably a way. Sorry if this wasn't very useful, just wanted to say that php would be a good way to do it.

answered Dec 08 '17 at 10:12

Thanks, but I should do it without server side programming. – MajAfy Dec 08 '17 at 10:35
why is that? if you just embed the stylesheet into the page it will only update once. – Dec 08 '17 at 10:37
This requires an inline stylesheet to be updated everytime a new element gets inserted. – roberrrt-s Dec 08 '17 at 13:03

Add animation delay to li automatically

2 Answers2