如何动态自定义CSS动画参数？

使用参数化值自定义 CSS 动画

提供的 CSS 动画设置从左侧滑入的元素的持续时间和参数。但是，如果您想根据上下文动态自定义这些参数怎么办？

实现此目的的一种方法是利用 CSS 变量。具体方法如下：

p {
动画持续时间：3s;
动画名称：slidein;
}

@keyframes slipin {
来自{

margin-left: var(--m, 0%);
width: var(--w, 100%);

}

到{

margin-left: 0%;
width: 100%;

}
}

现在，使用 JavaScript，您可以设置 --m (margin-left) 和 --w (width) 的值，如下所示：

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

这使您能够控制动画参数动态特定元素。

作为示例，考虑类名为“p1”和的两个段落"p2":

.p1,.p2 {
动画持续时间: 3s;
动画名称:slidein;
}

这将不设置动画，因为动画将使用设置为的默认值变量

这将产生动画，因为我们使用 JS 更改了 CSS 变量

第一段不会产生动画，因为它使用--m 和 --w 的默认值。然而，第二段将根据 JavaScript 中设置的自定义参数进行动画处理。

以上是如何动态自定义CSS动画参数？的详细内容。更多信息请关注PHP中文网其他相关文章！