Tengo un problema con una animación css que intento agregar a cada niño dentro de una etiqueta de navegación
Estoy tratando de crear un panel de stock en movimiento. Lo extraño es que si agrego otro atributo css como el color, funciona.
Alguien sabe como solucionar esto
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>¿Por qué no usar 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>