如何防止硬编码下面的 CSS animation？

Question

我正在使用@keyframes为这个 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>

其中的元素很少，可以对其进行硬编码，但是当蜡烛（元素）更多时......硬编码效率不高我希望能够为每个<line>或<path>元素声明特定的translateY() . 我怎样才能做到这一点？

Answer 1

在这个例子中，我使用了伪选择器的组合:nth-child() 。 也可以使用其他选择器伪类。 我并不是说我的例子是完美的，但如果你将更多的例子与不同的 CSS 属性值结合起来，我认为你可以获得看起来更随机的东西。

旁白：您可以看到我还尝试了attr() 。 目前这个 function 只能与 content 属性结合使用，但正如您可以从链接中阅读的那样，将来会有更多选项可用。 就像为秒设置类型 s 一样。

 .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>