如何動態自訂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中文網其他相關文章！