使用 CSS 動畫時，從 JavaScript 將值作為參數傳遞的功能非常有用。這允許動態和互動式體驗。
在 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，您可以設定這些變數：
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中文網其他相關文章！
