如何将 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中文网其他相关文章！