Loop with vars in CSS-CodePudding

I am very interested to know if it's posible looping vars in CSS to prevent writting the same, for example:

cloud-intro__image:first- child img{-webkit-animation-delay:.1s;animation-delay:.1s} .cloud-intro__image:nth-child(2) img{-webkit-animation-delay:.2s;animation-delay:.2s} .cloud-intro__image:nth-child(3) img{-webkit-animation-delay:.3s;animation-delay:.3s} .cloud-intro__image:nth-child(4) img{-webkit-animation-delay:.4s;animation-delay:.4s} .cloud-intro__image:nth-child(5) img{-webkit-animation-delay:.5s;animation-delay:.5s} .cloud-intro__image:nth-child(6) img{-webkit-animation-delay:.6s;animation-delay:.6s} .cloud-intro__image:nth-child(7) img{-webkit-animation-delay:.7s;animation-delay:.7s} .cloud-intro__image:nth-child(8) img{-webkit-animation-delay:.8s;animation-delay:.8s}

CodePudding user response：

You can set the rules once and then only update the css var() value for each selector :(

possible example

cloud-intro__image img {
--delay: .1s; /* default value */
  -webkit-animation-delay: var(--delay);
  animation-delay: var(--delay)
}

.cloud-intro__image:nth-child(2) img {
 --delay:.2s
}

.cloud-intro__image:nth-child(3) img {
  --delay: .3s
}

.cloud-intro__image:nth-child(4) img {
 --delay: .4s
}

.cloud-intro__image:nth-child(5) img {
 --delay: .5s
}

.cloud-intro__image:nth-child(6) img {
 --delay: .6s
}

.cloud-intro__image:nth-child(7) img {
  --delay: .7s
}

.cloud-intro__image:nth-child(8) img {
  --delay:.8s
}

For a real loop, JavaScript will be required, so it can update the var value on the fly. Here is an example:

let i = 0;
for (let e of document.querySelectorAll(".cloud-intro__image")) {
  i  ;
  e.style.setProperty("--delay",   i* .1   "s");

}

.cloud-intro__image img {
  animation: fadeinout 1s infinite;
  animation-delay: var(--delay);
}

@keyframes fadeinout {
  50% {
    opacity: 0;
  }
}

body {
  display: flex;
  flex-wrap:wrap;
}

<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>
<div ><img src="http://dummyimage.com/50"></div>