是的 — 在 CSS 切換開關產生器中將轉場持續時間設為零，會移除可見的動畫，但不會改變開關的開啟或關閉狀態。持續時間欄位接受從零到兩千的整數毫秒數，因此將值設為 0 會關閉插值效果，而其他所有屬性（軌道寬度、軌道高度、內部間距、關閉顏色、開啟顏色和旋鈕顏色）仍然有效。軌道和旋鈕只會從一個位置直接切換到另一個位置，因為背景顏色和變形都共用所選的轉場持續時間與 ease 時間函式關鍵字。當您為低干擾的設定畫面、高對比主題，或任何裝飾性動畫會干擾底層狀態變化的介面產生 CSS 切換開關時，將持續時間設為 0 是最簡單的關閉動畫方式。此行為僅限於產生器的輸入控制項；您複製的程式碼片段仍會將所選的持續時間公開為 CSS transition-duration 宣告，這表示您也可以稍後透過編輯目的端樣式表來關閉動畫，而不必從頭重新產生程式碼。
持續時間欄位如何移除動畫
CSS 切換開關產生器將持續時間值作為輸出中兩個 CSS 宣告的唯一真實來源：軌道的背景顏色和圓形 ::after 旋鈕的變形。兩個規則共用相同的 transition-duration 與相同的 ease 時間函式關鍵字，因此在表單中變更該值會立即同時變更複製出來的 CSS 中的兩個宣告。當持續時間為 0 毫秒時，兩個屬性都不會產生動畫 — 軌道會立即從關閉顏色切換到開啟顏色，旋鈕會立即從未勾選的間距位置移動到已勾選的移動位置。
旋鈕的移動距離本身與持續時間無關。移動距離等於軌道寬度減去軌道高度，未勾選位置是距左邊緣的所選內部間距。旋鈕大小等於軌道高度減去兩倍間距。這三個方程式與時間欄位無關，因此無轉場的開關仍具有正確的幾何形狀：旋鈕直徑會落在軌道內部，只要寬度至少比高度多八個像素，開啟和關閉位置就會明顯可區分。因此將持續時間設為 0 改變的是開關變化的方式，而不是開關最終的位置。
逐步產生無轉場的切換開關
- 在瀏覽器中開啟 CSS 切換開關產生器 — 表單和即時預覽都在本機端呈現，無需上傳步驟。
- 將軌道寬度設為 36 到 120 之間的整數像素值，並將軌道高度設為 20 到 64 之間的整數像素值。保持寬度至少比高度多 8 個像素，以確保開啟和關閉位置明顯可區分。
- 將內部間距設為 2 到 8 之間的整數像素值，使軌道內部保留正值的旋鈕空間。
- 將持續時間設為 0 以關閉動畫。預覽會在狀態間直接切換而非滑動。
- 為關閉顏色、開啟顏色和旋鈕顏色輸入完整的六位數 HEX 值。表單會拒絕不完整的十六進位字串，而非猜測預設值。
- 透過點擊軌道或標籤來切換預覽。確認旋鈕會直接切換到正確的已勾選位置，且軌道會在無插值的情況下變換顏色。
- 分別複製 CSS 和 HTML。產生器會為每個按鈕獨立請求剪貼簿權限，即使剪貼簿被拒絕，可見的程式碼仍可供手動選取。
- 將範例標籤文字（預設片段中的 Enable feature）替換為簡潔的實際狀態，例如 Email notifications 或 Dark mode。
- 整合後，測試渲染後開關的 Tab 和 Space 行為，特別是在 React 或 Vue 等框架中接線時。
零持續時間適合的設計情境
當開啟和關閉位置在沒有動畫的情況下已經明顯可見時，當周圍情境已能傳達變化時（標籤為 Dark mode 或 Email notifications 等會讓結果不言自明），或當周圍頁面內容繁多，滑動效果會與其他轉場競爭時，零持續時間的開關是正確的選擇。密集的設定畫面、無障礙優先的主題、資訊站介面，以及每個輸入都必須一眼可稽核的報表儀表板，都能從移除裝飾性動畫中受益。
相反地，較長的持續時間（數百毫秒是合理的範圍）有助於使用者在寬軌道上注意到狀態變化，特別是在標籤簡短且顏色相近的情況下。動畫也能表示互動已被註冊 — 這在觸控裝置上觸覺回饋不一致時特別有用。此選擇是編輯性而非技術性的：在 0 毫秒和 800 毫秒時，每個維度、間距和顏色選擇都相同。
| 持續時間 | 視覺效果 | 典型使用情境 |
|---|---|---|
| 0 ms | 軌道和旋鈕在關閉與開啟間直接切換 | 高對比主題、密集設定畫面、無障礙優先 UI |
| 150–400 ms | 使用 ease 關鍵字的短滑動 | 動畫作為回饋訊號的標準設定頁面 |
| 500–1000 ms | 明顯的滑動，吸引目光注意狀態變化 | 導覽教學、行銷介面和大型觸控目標 |
| 2000 ms（最大值） | 保留給特殊展示的緩慢滑動 | 主視覺動畫和展示；很少在正式環境中使用 |
減少動畫、聚焦對比和鍵盤行為
在產生器中將持續時間設為零是滿足偏好減少動畫使用者的一種方式。更具持續性的做法是在複製的程式碼片段中保留非零的基準值，並在目的端樣式表中加入減少動畫的覆寫。在 @media (prefers-reduced-motion: reduce) 區塊內，將 transition-duration 設為 0，僅為要求減少動畫的使用者關閉動畫。產生器在基準輸出中不包含該媒體查詢，因此當動畫是裝飾性而非功能性時，覆寫是您的責任。
原生核取方塊的語意不受持續時間選擇的影響。Tab 可將焦點帶到輸入項，Space 可切換 checked 屬性，焦點可見的外框仍保留在原生輸入項上並使用所選的開啟顏色，且外框相對於軌道有偏移而非被移除。該外框會繼承您輸入的開啟顏色，因此在預覽的中性背景上看起來明顯的顏色，在深色或品牌化背景上可能會消失 — 在實際頁面背景上出貨前請先驗證焦點環。根據 MDN 的 appearance 參考資料，appearance: none 宣告會移除預設的核取方塊繪製，但保留已勾選狀態、焦點和表單提交，這正是該程式碼片段所依賴的行為。
如果您將程式碼片段整合到框架中，請在接線後再次測試鍵盤路徑。React 或 Vue 中受控的狀態處理函式在 checked 和 onChange 不匹配時可能會中斷原生互動，且視覺化開關可能會宣告一個未在伺服器上保存的狀態變化。針對同一產生器但採用不同工作流程重點的更深入說明，CSS Create Toggle Button With Exact Geometry 指南更詳細地涵蓋了幾何決策。請確認開啟和關閉不僅靠顏色即可區分，特別是在相鄰標籤無法使狀態顯而易見時，並在將開關視為可正式使用之前測試對比、縮放、強制色彩模式和任何非同步失敗路徑。
限制、驗證和工具不輸出的內容
產生器在接受組合之前會驗證每個輸入：寬度介於 36 到 120，高度介於 20 到 64，間距介於 2 到 8，持續時間介於 0 到 2000，三種顏色皆為六位數 HEX。無效的組合會被純邏輯拒絕，而非產生負數的旋鈕大小或位於軌道外部的旋鈕，這表示僅將持續時間設為 0 永遠不會破壞幾何形狀。寬度必須保持至少比高度多八個像素，以確保開啟和關閉位置明顯可區分，且間距必須在軌道內部保留正值的旋鈕空間；這些限制是強制執行的，而非僅供參考。
該工具不會產生應用程式設定邏輯、非原生小工具的 ARIA 狀態同步、分析、持久化、API 呼叫或樂觀復原。它不包含 hover、active、disabled、invalid、loading 或 read-only 呈現。如果切換後接著有網路操作，您的程式碼必須在產生的 CSS 之外處理擱置中和失敗狀態，以免視覺化開關承諾一個未實際保存的變化。片段中不包含 JavaScript，因為基本的核取方塊狀態不需要它。
設定和程式碼不會被上傳、持久化或傳送至元件產生服務；所有功能都在瀏覽器本機端執行。範例保留 input type="checkbox"，因為切換開關代表二進位的表單狀態，且輸入項巢套在可見的標籤文字中，使整個標籤區域都可點擊，且控制項具有可存取名稱。將範例標籤替換為簡潔的實際狀態，並避免在一次性動作按鈕或多重選項選擇更為合適之處使用切換開關 — 視覺化切換開關專為剛好兩個穩定狀態而設計。
如需更深入的探討，請參閱 如何將 HEX 轉換為 RGBA 並取得 CSS rgba() 輸出。