使用 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中文网其他相关文章！
