感覺便宜的介面和感覺經過考慮的介面之間的差異通常是五分之一秒。指針一觸及按鈕,按鈕就會突然變成懸停顏色;同一個按鈕在 200 毫秒內緩和到該顏色,讀起來就完成了。這種緩和是一種 CSS 過渡,對於如此小的事情,值得注意的是,我經常看到它做錯了,放在懸停狀態而不是基本狀態,通過十幾次刷新中的反覆試驗進行調整,或應用於根本無法動畫化的屬性。
過渡是瀏覽器'一種動畫化屬性兩個值之間隨時間變化的方式,而不是立即切換。它是懸停效果、焦點狀態、擴展面板和切換類別背後的主力,幾乎總是任何人添加到項目中的第一個運動。但速記將四個值按固定順序塞進一行,計時函數是決定運動感覺的部分,並且有一個眾所周知的懸崖,當人們試圖淡入其中時,它們會掉下來 display: none. 建立可以看到它播放的過渡可以保存所有這些。
的 CSS 轉換產生器 讓您選擇一個屬性,設定持續時間和延遲(以毫秒為單位),並從 CSS 關鍵字和一組精選的立方貝塞爾曲線中選擇計時函數。您可以將多個轉換堆疊成一個簡寫,觸發按鈕會在即時預覽元素上播放該動作,以便您在承諾之前感受到輕鬆感。確切的聲明位於下面的可複製框中。
TL;DR: CSS 轉換動畫化了設定持續時間內屬性兩個值之間的變更。它屬於基本狀態,而不是懸停狀態,因此元素在兩個方向上都很輕鬆。簡寫順序是屬性、持續時間、時序函數、延遲。你不能過渡
display,因為它沒有中間值,你應該更喜歡動畫transform和opacity為了平穩的性能。此產生器透過即時懸停預覽公開每個部分,支援多層,並發出乾淨的 CSS。它完全在您的瀏覽器中運行,無需註冊。
CSS 轉換產生器解決了什麼問題?
過渡的困難部分不是語法;而是語法。這是你無法透過閱讀來判斷運動。 transition: transform 400ms cubic-bezier(0.68, -0.55, 0.27, 1.55) 描述了一種特定的彈跳輕鬆感,但了解彈跳是否適合您的按鈕的唯一方法是觀看它發生。在自己的專案中觀看它發生意味著編寫規則、設定懸停狀態、儲存滑鼠並將滑鼠移到元素上,然後調整一個數字並再次執行所有操作。這個循環足夠慢,以至於大多數人會選擇第一個有效的東西,而不是感覺最好的東西。
生成器將循環變成單擊。您設定持續時間並按下觸發器,預覽元素會在您面前播放過渡。更改計時函數並再次按下它,您會立即感受到線性幻燈片和輕鬆解決之間的差異。幾輪後,您就會感覺到 200 毫秒與 500 毫秒的感覺,這是區分運動(有助於運動)和妨礙運動的直覺。當你滿意時,工作中的 CSS 已經寫好了,所以沒有什麼可轉錄的。
與任何視覺化 CSS 建構器一樣,這裡適用相同的可靠性參數:您無法產生格式錯誤的 transition 透過拖曳滑桿並從選單中進行選擇來獲得價值,因此輸出始終可以安全貼上。這就是我保持這種工具關閉的原因,與伸手背後的本能相同 CSS 變換產生器 當我需要變換而不是計算腦中的度數時。
轉換去哪了,是在基態還是懸停態?
這是我最看到的錯誤,值得簡單說明,因為修復非常簡單。過渡屬於元素's 基本狀態,而不是其基礎狀態 :hover 規則。當在基本狀態上聲明轉換時,瀏覽器會在兩個方向上啟動該屬性:當指標到達時,它會輕鬆進入懸停更改,而當指標離開時,它會輕鬆退出。這種對稱性使互動感覺完整。
只打開過渡 :hover 你會得到一個不平衡的效果。該屬性在進入過程中動畫流暢,因為在元素懸停時存在轉換,但當指標離開時, :hover 規則不再適用,過渡隨之而來,屬性立即恢復。結果是一個按鈕,可以優雅地放寬,然後猛拉回來,這看起來比沒有動畫更糟糕。生成器'輸出被寫入基本狀態,並且正是因為這個原因,引導被烘烤到工具中。在元素本身上聲明一次,並讓狀態變更觸發它。
過渡速記的正確順序是什麼?
的 transition 速記將最多四個值打包到一行中,順序由規範固定:屬性、持續時間、時序函數、延遲。所以 transition: opacity 300ms ease-in-out 100ms 指不透明度屬性,在一百毫秒延遲後使用輕鬆進出曲線動畫超過三百毫秒。訂單錯誤,瀏覽器要么忽略聲明,要么將其讀取為您無意的內容。
捕捉人的唯一規則是兩個時間值。持續時間和延遲都是時間,CSS 純粹透過位置來區分它們:第一個時間值始終是持續時間,第二個時間值始終是延遲。如果您只寫一個時間值,則將其讀取為持續時間,並且延遲保持在預設值零。這就是為什麼似乎開始得太早的轉換通常是意外先寫入延遲的情況。產生器透過以正確的順序為您建立速記來迴避整個問題,並且當延遲為零時它會完全省略延遲,因此您永遠不會出現尾隨 0ms 那什麼也沒做。這是桌子上的解剖結構。
| 部分 | 例子 | 它控制什麼 |
|---|---|---|
| 財產 | opacity |
哪個屬性動畫化,或 all 對於每一個可動畫的 |
| 持續時間 | 300ms |
動畫需要多長時間;第一個時間值 |
| 時序函數 | ease-in-out |
運動的加速度曲線 |
| 延遲 | 100ms |
開始前要等多久;第二次時間值 |
為什麼我的顯示器:沒有過渡沒有動畫?
這就是懸崖,幾乎每個人都至少走過一次。你希望一個元素淡入,所以你就會過渡 display 從 none 到 block 並設定 opacity,並且該元素只是出現而沒有褪色。原因很根本: display 不是動畫屬性。之間沒有中間點 none 和 block50% 標記處瀏覽器無法插入任何值,因此兩者之間沒有任何關係。更改會立即發生,並且您分層在頂部的任何不透明動畫都會被切斷,因為該元素一開始並未渲染。
經典的修復方法是製作動畫 opacity 和 visibility 一起離開 display 脫離它。 visibility 可以轉換,因為雖然它也是一個離散屬性,但將其與持續時間配對可以讓瀏覽器保持元素可見,直到不透明度在退出時消失。現代修復是 transition-behavior: allow-discrete一種較新的功能,可讓您對離散屬性進行動畫處理,例如 display 在過渡的終點,所以你真的可以從中淡入 display: none 在支援它的瀏覽器中。不管怎樣,課程都是一樣的:在花一個小時想知道為什麼沒有任何東西移動之前,檢查您正在轉換的屬性是否具有中間值。這是即時預覽在幾秒鐘內出現的陷阱,這是構建運動的一個重要論點,您可以在其中觀看它。
什麼是計時函數?為什麼它如此重要?
定時函數是轉換的一部分,決定運動的感覺,它比持續時間做更多的工作。相同長度的兩個過渡根據其曲線可能會感覺完全不同。 A linear 過渡以恆定的速度移動,感覺機械,就像機器零件一樣。一個 ease-out 過渡開始得很快,到達時速度減慢,這感覺很自然,因為它模仿物理物件的減速方式,並且是大多數介面運動的正確預設值。 ease-in 做相反的事情,最適合離開螢幕的事情。
在下面,所有這些都是立方貝塞爾曲線。關鍵字 ease, ease-in, ease-out 和 ease-in-out 只是具體的友好名字 cubic-bezier(x1, y1, x2, y2) 值,其中兩個控制點塑造加速度。立方貝塞爾強度的原因在於控制點具有 a y 值高於 1 或低於 0 會將動畫推過其端點並返回,這就是建立過衝或彈跳的方式。生成器包括用於乾淨介面運動的材料標準曲線和用於超衝以獲得彈性、俏皮感覺的背部曲線,以及 steps() 運動功能可以在離散的框架中跳躍而不是滑翔,這就是你為精靈或滴答計數器製作動畫的方式。選擇一條曲線並按下觸發器是對每個曲線所做的事情建立感覺的最快方法。
我什麼時候應該使用多個過渡層?
單一過渡會賦予一個屬性動畫,但真實的互動通常會同時改變多個屬性。懸停時抬起的按鈕可能會改變其背景顏色、推動其變換並加深其陰影,而每個按鈕都可能需要自己的時機。這 transition property 透過逗號分隔的清單來處理此問題,其中每個條目都是完整的過渡,具有自己的屬性、持續時間、定時函數和延遲。
生成器直接支援這一點:為每個屬性添加一層,獨立調整每個屬性,然後工具將它們連接成一個簡寫,例如 transition: background-color 200ms ease, transform 200ms ease-out。 給出屬性單獨轉換而不是使用的原因 all 是控制和性能。 transition: all 很方便,但它會動畫化每個更改的屬性,包括您不打算更改的屬性,並且它迫使瀏覽器監視所有內容以進行更改。命名特定屬性既更可預測又更便宜。工具中預設的慢速顯示顯示兩層過渡、褪色不透明度以及以共享延遲一起移動變換,這是輕鬆進入視圖的元素的標準配方。如果該配對的變換側是您正在調整的,則 CSS 變換產生器 是配套工具,兩者幾乎總是一起使用。
我應該為哪些屬性製作動畫才能獲得流暢的性能?
並非所有屬性的動畫製作成本都相同,並且選擇直接影響您的轉換是否以每秒 60 幀的平滑運行或結巴運行。更喜歡的兩個屬性是 transform 和 opacity。 兩者都可以交給 GPU 並進行合成,而無需重新計算頁面佈局,因此即使在普通硬體上,動畫它們也能保持流暢。這就是為什麼一張卡片可以滑入的原因 transform: translateX 感覺黃油味,同時同一張卡片動畫 left 感覺很粗糙。
避免動畫化的屬性是觸發佈局的屬性: width, height, top, left, margin 和 padding。 更改其中任何一個都會迫使瀏覽器在動畫的每個幀上重新計算元素的位置和大小以及受其影響的所有內容,這很昂貴,也是造成不穩定運動的最常見原因。如果您想製作寬度動畫,通常值得詢問是否 transform: scaleX 會更便宜地產生類似的效果。生成器可讓您選擇任何屬性,因此您永遠不會被阻止,但它列出的屬性會放置 transform 和 opacity 靠近頂部,因為這些是您應該首先到達的。建立一套經過深思熟慮的工具的更廣泛案例是在 web 開發人員工具包 片段及其背後的工作流程習慣都在 開發人員生產力工具 指南。
生成器如何保持預覽誠實?
每個視覺建構器都面臨相同的風險:預覽和匯出的程式碼漸行漸遠,直到工具教您一個無法重現的值。此生成器應用精確 transition 重視它輸出到預覽元素並透過真實狀態變更觸發它,因此您看到的運動是複製的 CSS 將產生的運動。沒有單獨的動畫路徑可能會不同意。
因為轉換僅在屬性變更時運行,所以預覽需要一個狀態來切換,這就是觸發按鈕的作用:它在兩組值之間翻轉元素,以便轉換觸發並且可以觀看它。這反映了轉換在野外的工作原理,其中懸停、焦點或切換的類別是觸發它的原因。輸出也保持最小,當延遲為零時刪除延遲並僅列出您新增的層,與僅發出貫穿的有意義聲明的相同規則相同 梯度發生器 和 箱形陰影產生器.
哪些瀏覽器支援 CSS 轉換?
目前每個瀏覽器都支援 CSS 轉換,並且已經支援十多年了。這 transition 屬性及其所有長手都是通用且無前綴的,因此此產生器的輸出可在 Chrome、Firefox、Safari 和 Edge 中運行,沒有任何供應商前綴或後備。較新的 transition-behavior: allow-discrete 能夠為離散屬性製作動畫,例如 display 是更新的並且具有更窄的支持,因此將該特定技術視為漸進式增強,並將不透明性和可見性配對作為您的後備。對於權威規則,W3C 的 CSS 轉換模組 1 級規範是主要來源,一旦生成器讓您了解零件的配合情況,就值得一讀。
如果您正在組裝更廣泛的視覺化 CSS 工具、變換產生器和 CSS 濾波器產生器 自然地與此配對,因為過渡可以平滑您用它們建立的轉換和過濾器。這裡的所有內容都在客戶端運行,您複製的 CSS 就是您的使用,沒有運行時、沒有構建步驟和依賴性。
常見問題
什麼是 CSS 轉換產生器?
CSS 轉換產生器是一種視覺化工具,可根據您選擇的設定建立 CSS 轉換。您選擇屬性、持續時間、定時函數和延遲,它會輸出轉換簡寫以及即時預覽,您可以觸發該預覽來觀看緩動。
我該將轉換放在哪裡,放在基態或懸停態?
將其置於基本狀態。基本規則上聲明的轉換會使屬性在兩個方向上產生動畫,進入懸停切換並返回。僅在懸停上聲明它會使更改動畫化,但當指標離開時,它會立即恢復。
過渡速記的順序是多少?
順序是屬性、持續時間、定時函數、延遲,例如轉換:不透明度 300ms 輕鬆進出 100ms。第一個時間值始終是持續時間,第二個時間值始終是延遲,因此單一時間值被讀作持續時間。
為什麼我的顯示器:無顯示器:區塊轉換不動畫?
因為顯示不是可動畫屬性。 none 和 block 之間沒有中間值,因此瀏覽器沒有任何關係。相反,過渡不透明度和可見性一起使用,或使用過渡行為:允許較新瀏覽器中的離散內容從顯示中淡入:無。
我可以同時轉換多個財產嗎?
是的。用逗號分隔每個轉換,例如轉換:不透明度 300ms 輕鬆,變換 200ms 輕鬆。當您新增圖層時,此產生器會為您建立該列表,為每個屬性提供自己的持續時間、定時函數和延遲。
什麼是三次貝塞爾時序函數?
三次貝塞爾定時函數定義來自兩個控制點的自訂加速度曲線,即書面的三次貝塞爾(x1、y1、x2、y2)。關鍵字「輕鬆」、「輕鬆」、「輕鬆」和「輕鬆」是特定曲線的快捷方式,高於 1 或低於 0 的控制點會產生超調,這就是建立彈跳的方式。
我應該為哪些屬性製作動畫才能獲得流暢的性能?
喜歡變換和不透明度。它們在 GPU 上合成,不會觸發佈局,因此它們以 60fps 的速度進行動畫處理。動畫寬度、高度、頂部、左側或邊緣迫使瀏覽器重新計算每個幀的佈局,這是口吃轉換的最常見原因。
產生的轉換 CSS 是否免費且安全使用?
是的。該工具完全免費,沒有註冊或使用限制,並且每個現代瀏覽器都支援標準的、無前綴的 CSS。所有處理都發生在您的瀏覽器中,因此不會上傳任何內容,並且工具在載入後會離線工作。
