I am encountering an issue with a CSS animation that I am trying to implement for each child within a nav element. Specifically, I am attempting to create a dynamic stock panel.
Interestingly, when I add another CSS attribute like color, it works as expected. However, the animation itself is not functioning properly.
Does anyone have any insights or solutions to this problem?
function DoAnimation(animation, a) {
var parent = a.parentElement
if (animation != null) {
parent.removeChild(a);
parent.appendChild(a);
console.log(1);
a.style.animationName = animation;
a.style.animationDuration = "2s";
}
}@keyframes MoveStockTORIght {
from {
left: 0;
}
to {
transform: translateX(100px);
}
}
.SiteNav {
overflow: hidden;
text-align: center;
margin: auto;
text-align: center;
}
.SiteNav a {
gap: 10%;
padding: 1%;
}<nav class="SiteNav" id="siteNavigantion">
&(#60);a href="StockPage.aspx?stock=MSFT" style="color: green; animation-name: MoveStockTORIght; animation-duration: 2s;" id="a0">MSFT 294.23</a>
<a href="StockPage.aspx?stock=CLOV" style="color: green; animation-name: MoveStockTORIght; animation-duration: 2s;" id="a1">CLOV 8.06</a>
<a href="StockPage.aspx?stock=LCID" style="color: green; animation-name: MoveStockTORIght; animation-duration: 2s;" id="a2">LCID 22.87</a>
<a href="StockPage.aspx?stock=SAVA" style="color: green; animation-name: MoveStockTORIght; animation-duration: 2s;" id="a3">SAVA 51.08</a>
<a href="StockPage.aspx?stock=AAL" style="color: green; animation-name: MoveStockTORIght; animation-duration: 2s;" id="a4">AAL 20.13</a>
<a href="StockPage.aspx?stock=AMZN" style="color: green; animation-name: MoveStockTORIght; animation-duration: 2s;" id="a5">AMZN 3246.3</a>
<a href="StockPage.aspx?stock=NFLX" style="color: green; animation-name: MoveStockTORIght; animation-duration: 2s;" id="a6">NFLX 627.04</a>
<a href="StockPage.aspx?stock=GOOG" style="color: green; animation-name: MoveStockTORIght; animation-duration: 2s;" id="a7">GOOG 2776.95</a>
<a href="StockPage.aspx?stock=AAPL" style="color: green; animation-name: MoveStockTORIght; animation-duration: 2s;" id="a8">AAPL 142.81</a>
<a href="StockPage.aspx?stock=NVDA" style="color: green; animation-name: MoveStockTORIght; animation-duration: 2s;" id="a9">NVDA 206.95</a>
</nav>