設定動畫
Last updated on 12/6/2024@mrbirddev
Slidde.co 讓您輕鬆地將標準 CSS 關鍵幀動畫應用到您的網頁元素。以下是一個逐步指南，幫助您開始使用。
側邊欄中的動畫選項
- 選擇一個元素：點擊頁面上的任意元素。
- 打開 動畫 模態窗口：在右側邊欄中，點擊 動畫 標籤按鈕，您會找到 動畫 選項。點擊它以打開模態窗口。
- 從預設開始：我們建議從預設動畫開始，您可以稍後修改以滿足您的需求。您可以點擊預設按鈕來替換為預設。如果您點擊按鈕中的 加號圖標，預設將被附加到當前動畫中。
自訂動畫
動畫模態將設置 CSS 關鍵幀動畫的過程簡化為低代碼界面，即使您不熟悉編碼也能輕鬆使用。
關鍵幀動畫是您為某些百分比定義 CSS 屬性的地方。瀏覽器會為您處理過渡。
例如，如果您有一個持續時間為 4 秒的關鍵幀，如下所示。
0% translateX(0)
50% translateX(-20px)
100% trasnlateX(0)
物件將在 2 秒內向下移動 20px，然後在 2 秒內向上移動 20px 回到其原始位置。
如果您遇到任何問題或想了解更多關於關鍵幀動畫的信息：
- 在線搜索：在 Google 上搜索您的具體問題；有很多範例和資源可供使用。
- CSS 關鍵幀教程：參考官方 MDN 上的 CSS 關鍵幀指南 以獲取全面的信息。
觸發
此欄位控制動畫何時播放。
- 元素顯示: 這是預設的動畫。當元素被捲動到可視範圍內或包含的區塊顯示時，動畫將被觸發 哈希部分
- 元素顯示（每次重播）: 與上述相同，但每次元素顯示時動畫將重新播放。
- 頁面加載: 當頁面載入時，動畫將被觸發。
目標
通常你不需要設定這個。預設值是 &，這表示根元素。
然而，有些情況下你需要設定它。
若要為 高級背景 元素設置動畫，你可以將 目標 設為 第一個子元素，因為 高級背景 元素總是根元素的第一個子元素。
若要對所有子元素應用交錯延遲。請閱讀 Delay & staggering delay 部分以獲取更多詳細資訊。
Delay & staggering delay
如果你將 延遲 設為 1000ms，動畫將在等待 1000ms 後播放。
如果你將 錯落 設為 50ms 並將目標設為 所有直接子元素。動畫將應用於每個直接子元素，並等待
- 第一個元素，1000ms，
- 第二個元素，1050ms，
- 第三個元素，1100ms，
- ...
Text staggering
這適用於 文字 元件。
如果你設置 錯落 並將目標設為 所有字母。交錯效果將應用於每個字母。
使用 css animation 屬性
在 CSS 中，所有元素都可以使用簡單的 css 動畫。但你可能需要為該特定的 css 規則開啟 Disable in canvas 以便在編輯器中更容易編輯。