Css animation doesn't move object-CodePudding

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>

CodePudding user response：

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>