嗨，我的css動畫有問題。我比不上& quot移動盒子& quot用他蓋的瓷磚。我使用bootstrap，所以css中的值不能是靜態的，所以我考慮過使用js，但我不知道如何將JS值注入關鍵幀。 這是動畫:

@keyframes slide {

0% {
  left: 0%;
  background: red;
}

25%{
  left: 26%;
  background: blue;

}
50%{
  left: 52%;
  background: yellow;

}
75%{
  left: 75%;
  background: purple;
}
100%{
  left: 95%;
  background: purple;
  transform: translatex(-100%);
  
}

下面是完整的代碼:

https://codepen.io/squezer123/pen/JjmVNeN

我想過只用css，但是我不知道用什么來達到那個效果。我聽說react可以實現這一點，但我不確定。