設定動畫

Slidde.co 讓您輕鬆地將標準 CSS 關鍵幀動畫應用到您的網頁元素。以下是一個逐步指南，幫助您開始使用。

側邊欄中的動畫選項

1. 選擇一個元素：點擊頁面上的任意元素。
2. 打開 動畫 模態窗口：在右側邊欄中，滾動到最底部，您會找到 動畫 選項。點擊它以打開模態窗口。

使用預設動畫

• 從預設開始：我們建議從預設動畫開始，您可以根據需要進行修改。
• 尋找更多預設：您可以在 Animate.css 找到預設動畫列表。如果您需要特定的動畫，請告訴我們，我們可以將其添加到列表中。

自訂動畫

動畫模態將設置 CSS 關鍵幀動畫的過程簡化為低代碼介面，即使您不熟悉編碼也能輕鬆使用。

關鍵幀動畫是您為某些百分比定義 CSS 屬性的地方。瀏覽器會為您處理過渡。

例如，如果您有一個持續時間為 4 秒的關鍵幀，如下所示。

0% translateX(0)

50% translateX(-20px)

100% trasnlateX(0)

該對象將在 2 秒內向下移動 20px，然後在 2 秒內向上移動 20px 回到其原始位置。

如果您遇到任何問題或想了解更多關於關鍵幀動畫的信息：

• 在線搜索：在 Google 上搜索您的具體問題；有很多範例和資源可用。
• CSS 關鍵幀教程：參考官方 MDN 上的 CSS 關鍵幀指南 以獲取全面的信息。

動畫子元素

您可以通過將 Targets 設置為 &>* 來定位根元素的子元素。

交錯延遲

如果您將延遲更改為以下值，將會應用交錯效果。

targets: &>*
delay: anime.stagger(100) // 每個元素的延遲增加100毫秒。

targets: &>*
delay: anime.stagger(100, {start: 500}) // 延遲從500毫秒開始，然後每個元素增加100毫秒。

更多範例請參考這裡 交錯基礎

使用 css animation 屬性

一個簡單的 css 動畫 始終可用於 自定義樣式 中的所有元素。但您可能需要為該特定的 css 規則開啟 Disable in canvas，以便在編輯器中更容易編輯。