I have a problem with a css animation im trying to add to each child inside a nav tag
I'm trying to create a moving stock panel The weird thing about it is that if I add another css attribute like color it does work
Does anyone knows how to solve this
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">
<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>Why not just use Marquee?
.SiteNav {
overflow: hidden;
text-align: center;
margin: auto;
text-align: center;
}
.SiteNav a {
gap: 10%;
padding: 1%;
}
marquee a { text-decoration: none; color:green; }<marquee class="SiteNav" id="siteNavigantion">
<a href="StockPage.aspx?stock=MSFT" id="a0">MSFT 294.23</a>
<a href="StockPage.aspx?stock=CLOV" id="a1">CLOV 8.06</a>
<a href="StockPage.aspx?stock=LCID" id="a2">LCID 22.87</a>
<a href="StockPage.aspx?stock=SAVA" id="a3">SAVA 51.08</a>
<a href="StockPage.aspx?stock=AAL" id="a4">AAL 20.13</a>
<a href="StockPage.aspx?stock=AMZN" id="a5">AMZN 3246.3</a>
<a href="StockPage.aspx?stock=NFLX" id="a6">NFLX 627.04</a>
<a href="StockPage.aspx?stock=GOOG" id="a7">GOOG 2776.95</a>
<a href="StockPage.aspx?stock=AAPL" id="a8">AAPL 142.81</a>
<a href="StockPage.aspx?stock=NVDA" id="a9">NVDA 206.95</a>
</marquee>