How can I prevent hard coding the CSS animation below? - html

Question

I'm using #keyframes to animate this svg :
.candles {
width: -webkit-fill-available;
transition: all 0.5s;
}
.candles line, path{
stroke: #5ABCF3;
animation-name: candle;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-play-state: running;
animation-direction: alternate;
}
#keyframes candle {
from { stroke: #5ABCF3 }
to { stroke: blue; transform: translateY(-128px);}
}
<svg class="candles" width="1782" height="472" viewBox="0 0 1782 472" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="frame">
<line id="line-1" x1="6.5" y1="219.652" x2="6.5" y2="270.117" stroke="#5ABCF3" stroke-width="13"/>
<line id="line-2" x1="35.2988" y1="259.74" x2="35.2988" y2="274.583" stroke="#5ABCF3" stroke-width="13"/>
<line id="line-3" x1="62.5488" y1="258.266" x2="62.5488" y2="290.919" stroke="#5ABCF3" stroke-width="13"/>
<path id="line-4" d="M96.2578 273.045V323.509" stroke="#5ABCF3" stroke-width="13"/>
<path id="line-5" d="M123.475 305.76V322.086" stroke="#5ABCF3" stroke-width="13"/>
<path id="line-6" d="M153.799 255.301V328.029" stroke="#5ABCF3" stroke-width="13"/>
</g>
</svg>
in this have few elements and it's okay to hard code it, but when candles ( elements ) are more ... hard coding is not efficient
I want to be able to declare specific translateY() for each <line> or <path> element.
How can i do that?

Answer 1

In this example I use a combination of the pseudo selectors :nth-child(). Other selectors Pseudo-classes could also be used. I'm not saying that my example is perfect, but if you combine more of them with different CSS property values I think you can get something that looks more of less random.
Aside: You can see that I also experimented with attr(). At the moment this function can only be used in combination with the content property, but as you can read from the link more options will be available in the future. Like setting a type s for seconds.
.candles line,
.candles path {
stroke: #5ABCF3;
transition: all 0.5s;
animation-name: candle;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-play-state: running;
animation-direction: alternate;
animation-delay: attr(data-delay s);
}
.candles *:first-child {
animation-delay: 1ms;
}
.candles *:first-child {
animation-delay: 1s;
animation-duration: 4.5s;
}
.candles *:nth-child(odd):nth-child(n+3) {
animation-delay: 2s;
animation-duration: 5.5s;
}
.candles *:nth-child(odd):nth-child(n+5) {
animation-delay: 2s;
}
.candles *:nth-child(even):nth-child(n+5) {
animation-delay: 3s;
animation-duration: 1.5s;
}
#keyframes candle {
from {
stroke: #5ABCF3
}
to {
stroke: blue;
transform: translateY(-128px);
}
}
<svg class="candles" width="1782" height="472" viewBox="0 0 1782 472" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="frame">
<line data-delay="10" x1="6.5" y1="219.652" x2="6.5" y2="270.117" stroke="#5ABCF3" stroke-width="13"/>
<line data-delay="0" x1="35.2988" y1="259.74" x2="35.2988" y2="274.583" stroke="#5ABCF3" stroke-width="13"/>
<line data-delay="2" x1="62.5488" y1="258.266" x2="62.5488" y2="290.919" stroke="#5ABCF3" stroke-width="13"/>
<path data-delay="5" d="M96.2578 273.045V323.509" stroke="#5ABCF3" stroke-width="13"/>
<path data-delay="3" d="M123.475 305.76V322.086" stroke="#5ABCF3" stroke-width="13"/>
<path data-delay="1" d="M153.799 255.301V328.029" stroke="#5ABCF3" stroke-width="13"/>
</g>
</svg>