CSS過渡教程

CSS過渡可以通過最小的代碼來實現平滑屬性的變化，非常適合懸停效果和交互式反饋。 1。使用語法過渡：屬性持續時間正時函數延遲；定義過渡，例如過渡：背景色0.3s易於0.1 s;。 2。為CSS屬性指定過渡性屬性，以動畫，更喜歡背景色，不透明度或通過不可互化的屬性（如Display）進行轉換。 3。設置過渡到控制動畫長度，例如0.3s，這是運行過渡所必需的。 4。應用過渡功能，例如輕鬆，線性或立方bezier（）來定義起搏。 5。使用過渡 - 延遲延遲起點，例如0.1s。 6。列出帶有逗號的多個轉變以進行複雜效果。 7。優先考慮轉換和不透明度的GPU加速度和更好的性能。 8。將持續時間保持在200-500ms之間，以敏感。 9。避免過渡：全0.3s；為了防止意外動畫。 10。請勿在大元素上使用諸如寬度或高度之類的佈局屬性，以避免jank。 11。用不透明度和指針事件替換顯示為平滑顯示/隱藏效果的切換，如.fade {opacity：0;過渡：不透明度0.3s易於;指針盛會：無； }和.fade.Active {不透明度：1;指針盛會：自動； }。 12.使用速記進行簡潔或長時間的清晰度。 13.確保CSS屬性實際更改狀態（例如，通過：懸停或類更改）以觸發過渡。正確應用後，CSS過渡會創建快速，微妙和性能的交互，從而在沒有JavaScript的情況下增強用戶體驗。

CSS過渡是控制CSS屬性時控制動畫速度的一種簡單方法 - 非常適合懸停效果，按鈕狀態或佈局更改。您不需要JavaScript或複雜的密鑰幀。只需幾行CSS，您就會獲得光滑的視覺反饋。

這是有效使用它們的方法。

什麼是CSS過渡？

CSS的transition使您可以定義屬性從一個值轉移到另一個值時的時間應隨著時間的變化，例如用戶徘徊在按鈕上時。從傳統意義上講，這不是動畫，而是兩個州之間平穩的插值。

基本語法：

過渡：屬性持續時間正時功能延遲；

例子：

按鈕 {
  背景色：藍色；
  過渡：背景色0.3s易於0.1 s;
}

按鈕：懸停{
  背景色：紅色；
}

這使得背景顏色從藍色變為紅色，超過0.3秒，延遲了0.1s，並且“易於”的時序曲線。

關鍵過渡屬性

您不必每次設置所有值 - 大多數都可以省略，並且會返回默認值。

• transition-property
  該屬性是為了動畫的。常見的： background-color ， opacity ， transform ， width ， color 。
  使用all來動畫任何更改的屬性（不建議進行性能）。

• transition-duration
  動畫需要多長時間（例如0.5s或500ms ）。必須指定，否則過渡將無法運行。

• transition-timing-function
  控制起搏。選項包括：

  • ease （默認，開始緩慢，結束慢）
  • linear （恆定速度）
  • ease-in ， ease-out ， ease-in-out
  • cubic-bezier(x1, y1, x2, y2) - 自定義曲線

• transition-delay
  等待多長時間才開始（例如0.2s ）。

您還可以設置多個過渡：

按鈕 {
  過渡： 
    背景色0.3s易於
    變換0.2S線性，
    不透明度0.4S易於入口；
}

最佳實踐和技巧

並非所有屬性都可以過渡 - 只有具有可插值值（數字，顏色，長度）的屬性。例如，您無法平穩過渡display: none block ，但是您可以opacity和visibility褪色。

✅做到這一點：

• 使用transform和opacity以獲得最佳性能（GPU加速）。
• 保持持續時間短（200-500ms），以響應響應。
• 將過渡添加到交互式元素（按鈕，鏈接）以進行反饋。

❌避免：

• transition: all 0.3s; - 它可以動畫意外屬性。
• 在大元素上（可能導致jank）上的佈局屬性（例如width ， height或margin 。
• 使用display的過渡或z-index - 它們不會插入。

平滑按鈕懸停的示例：

 .btn {
  填充：10px 20px;
  背景：＃007BFF;
  顏色：白色；
  邊界：無；
  邊界拉迪烏斯：4PX；
  過渡：所有0.3 s selie;
  光標：指針；
}

.btn：懸停{
  背景：＃0056B3;
  變換：translatey（-2px）;
  盒子陰影：0 4PX 8PX RGBA（0,0,0,0.2）;
}

速記與朗德

為簡單起見，請使用速記：

過渡：背景色0.3s易於;

或為了清楚起見：

過渡範圍：背景色；
過渡效果：0.3s;
過渡時期功能：輕鬆；
transition-delay：0s;

速記更普遍和簡潔。

當過渡不起作用時 - 常見修復

• 忘記duration ？如果未設置時間，則不會運行過渡。
• 屬性不更改？過渡僅在值更改時觸發（例如，懸停，類切換）。
• 使用display還是visibility ？這些不會順利進行動畫 - 而是使用opacity pointer-events 。

顯示/隱藏的示例：

 .fade {
  不透明度：0;
  過渡：不透明度0.3s易於;
  指針盛會：無；
}

.fade.Active {
  不透明度：1;
  指針盛會：自動；
}

基本上，CSS過渡是您進行微妙的表現互動的首選。使他們集中精力，快速和關注重要的屬性。一旦掌握了它，您就可以到處添加它們 - 按鈕，菜單，圖標，卡片。它們使靜態站點感到活躍。

以上是CSS過渡教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！