Use css counter in calc

Question

I have a list ul>li*5 (not always the same amount). I set a counter for which I get:

1 2 3 4 5

li:nth-child(n):before {
  counter-i         


        

Answer 1

This wouldn't necessarily be an elegant solution, but you could solve it with nth-child or using css variables. Code below, or see here: https://codepen.io/goodship11/pen/XBVeez

nth-child version:

li { 
  opacity: 0; 
  padding: 5px 0 5px 5px;
  list-style: none;
  background-color: rgba(200,50,255,.2);
  display: block;
  width: 20%;
  height: 10%;
}
li:nth-child(even) { background-color: rgba(200,50,255,.5); }

@keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } }

li { animation: fade 1.5s ease-in forwards; }

/* Since you're doing an animation, chances our the number 
of elements will be small, so you can just pre-define for however 
many versions using nth-child. This wouldn't work for use cases 
where, for example, you want a percentage of the whole instead 
of a fixed number */

li:nth-child(1) { animation-delay: 1s; }
li:nth-child(2) { animation-delay: 2s; }
li:nth-child(3) { animation-delay: 3s; }
li:nth-child(4) { animation-delay: 4s; }
li:nth-child(5) { animation-delay: 5s; }
li:nth-child(6) { animation-delay: 6s; }
li:nth-child(7) { animation-delay: 7s; }
li:nth-child(8) { animation-delay: 8s; }

  
Thing 1
  
Thing 2
  
Thing 3
  
Thing 4
  
Thing 5

CSS variables version:

li { 
  opacity: 0; 
  padding: 5px 0 5px 5px;
  list-style: none;
  background-color: rgba(200,50,255,var(--fader));
  display: block;
  width: 20%;
  height: 10%;
}
@keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } }

li { animation: fade 1.5s ease-in forwards; }

/* Below is an alternative approach using the same variable 
from the opacity. I added in a scaling factor to show how you 
can use one variable for multiple things in cases like this.  */ 

:root {--factor: .5; }
li { animation-delay: calc(10s * var(--fader) * var(--factor));}

  

  
Thing 1
  
Thing 2
  
Thing 3
  
Thing 4
  
Thing 5