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