如何使用 JavaScript 動態控制 CSS 動畫參數？

帶有 CSS 變數的動態動畫參數

在 Web 開發中，CSS 動畫提供視覺上引人入勝的效果，增強使用者體驗。但是，有時您可能需要根據特定場景或使用者輸入動態調整動畫中的屬性。其中一項要求是將參數從 JavaScript 傳遞給 CSS 動畫。

在給定的範例中，您有一個具有預先定義的左邊距和寬度值的動畫。預設情況下，這些值在 CSS 程式碼中是固定的：

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

要從 JavaScript 動態控制這些值，您可以利用 CSS 變數。 CSS 變數可讓您儲存和操作 CSS 中的值，從而提供更大的靈活性。要使用它們，請按照以下步驟操作：

1. 定義 CSS 變數： 在樣式表中聲明要參數化為 CSS 變數的屬性。

@keyframes slidein {
  from {
    margin-left: var(--m, 0%);
    width: var(--w, 100%);
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}

2. 使用JavaScript 設定變數值： 在您的JavaScript 程式碼中，存取CSS 變數並使用style.setProperty() 方法為其指派新值。

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

透過操作 CSS 變量，您可以動態地將參數傳遞給動畫並調整其屬性飛行。這使您可以更好地控制應用程式中動畫元素的外觀和行為。

以上是如何使用 JavaScript 動態控制 CSS 動畫參數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！