如何將 JavaScript 變數傳遞給 CSS 動畫？

使用 JavaScript 將變數傳遞給 CSS 動畫

使用 CSS 動畫時，從 JavaScript 將值作為參數傳遞的功能非常有用。這允許動態和互動式體驗。

解決方案：CSS 變數

在 CSS 中，使用變數可以將值從 JavaScript 傳遞到動畫。例如：

.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 中實作

使用JavaScript，您可以設定這些變數：

document.querySelector('.p2').style.setProperty('--m','100%');
document.querySelector('.p2').style.setProperty('--w','300%');

範例用法

這將使用類別「p2」更改元素的動畫：

<p class="p1">
 This will not animate as the animation will use the default value set to the variable
</p>
<p class="p2">
  This will animate because we changed the CSS variable using JS
</p>

以上是如何將 JavaScript 變數傳遞給 CSS 動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！