CODEWITHSUNDEEP
cssanimation
MajAfy
MajAfy

Reputation: 3097

Add animation delay to li automatically

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.

Upvotes: 0

Views: 1906

Answers (2)

Ismail Farooq
Ismail Farooq

Reputation: 6837

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>

Upvotes: 1

user7080613
user7080613

Reputation:

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.

Upvotes: 0

Related Questions