JavaScript可以動態修改CSS動畫參數嗎？

用JavaScript參數化CSS動畫

問題：

提供的CSS動畫程式碼中，是否可以動態修改margin -left 和width 值透過JavaScript？

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

答案：

是的，有一種方法可以利用 CSS 變數從 JavaScript 傳遞值到 CSS 動畫。

.p1,.p2 {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: var(--m, 0%);
    width: var(--w, 100%);
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}

JavaScript:

// Set CSS variables using JavaScript
document.querySelector('.p2').style.setProperty('--m','100%');
document.querySelector('.p2').style.setProperty('--w','300%');

這種方法可讓您透過動態控制動畫參數JavaScript，實現更大的靈活性和自訂性。

以上是JavaScript可以動態修改CSS動畫參數嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！