CSS Transition Generator
Configure CSS transitions with hover preview.
過渡 1
懸停於我
.element {
transition: all 0.3s ease 0s;
}
.element:hover {
/* apply your hover styles here */
}關於本工具
CSS過渡產生器允許您透過設定目標屬性、持續時間、時間函數和延遲來設定transition簡寫屬性。互動式預覽讓您在複製程式碼前查看過渡效果。
CSS過渡透過:hover、:focus等偽類或JavaScript類別變更觸發，在兩個CSS值之間建立平滑的狀態變化。與動畫不同，過渡需要觸發事件。
使用方法
- 選擇要過渡的CSS屬性（或使用all）。
- 設定持續時間——過渡需要多長時間（如0.3s）。
- 選擇控制加速曲線的時間函數。
- 可選地在過渡開始前新增延遲。
- 將滑鼠懸停在預覽框上查看即時效果，然後複製CSS。
使用情境
開發者將過渡用於按鈕懸停效果、卡片放大和導覽連結的顏色變化。表單設計師用於輸入焦點樣式，側邊欄元件用於滑入/滑出效果。
常見問題
- transition和animation有什麼區別？ — 過渡對狀態變化（如懸停）做出反應；動畫使用關鍵影格自動或循環執行。
- 可以過渡多個屬性嗎？ — 可以。點擊「新增過渡」可以新增多個以逗號分隔的屬性規則。
- 哪些屬性可以過渡？ — 大多數具有數值的屬性（opacity、color、transform、尺寸等）都可以過渡。display等屬性不能過渡。