CSS過渡入門指南

CSS過渡是在CSS中創建動畫的最簡單方法。在過渡中，您更改屬性的值，並告訴CSS根據某些參數將其緩慢更改為最終狀態

CSS過渡介紹

CSS過渡是在CSS中創建動畫的最簡單方法。

在過渡中，您更改屬性的值，並告訴CSS根據某些參數將其緩慢更改為最終狀態。

CSS過渡由以下屬性定義：

財產	描述
`transition-property`	應該過渡的CSS屬性
`transition-duration`	過渡的持續時間
`transition-timing-function`	動畫使用的計時功能（常用值：線性，緩動）。默認值：緩解
`transition-delay`	開始動畫之前等待的可選秒數

這transition屬性是一個方便的速記：

.container {
  transition: property duration timing-function delay;
}

CSS過渡示例

這段代碼實現了CSS過渡：

.one,
.three {
  background: rgba(142, 92, 205, 0.75);
  transition: background 1s ease-in;
}
.two,
.four {
background: rgba(236, 252, 100, 0.75);
}
.circle:hover {
background: rgba(142, 92, 205, 0.25); /* lighter */
}

參見故障示例https://glitch.com/edit/#!/flavio-css-transitions-example

懸停時.one和.three元素，紫色圓圈，有一個過渡動畫可以緩解背景變化，而黃色圓圈則沒有，因為它們沒有transition屬性定義。

過渡計時功能值

transition-timing-function允許指定過渡的加速度曲線。

您可以使用一些簡單的值：

價值
線性的
舒適
緩入
緩和
緩入

這個小故障展示了這些在實踐中如何工作

您可以使用以下命令創建完全自定義的計時功能三次貝塞爾曲線。這是相當先進的，但基本上上述所有功能都是使用貝塞爾曲線構建的。我們有一些方便的名稱，因為它們很常見。

瀏覽器DevTools中的CSS過渡

這瀏覽器開發工具提供了一種可視化過渡的好方法。

這是Chrome：

Debug CSS Transitions in Chrome DevTools

這是Firefox：

Debug CSS Transitions in Firefox DevTools

在這些面板中，您可以直接在頁面上實時編輯過渡和實驗，而無需重新加載代碼。

可以使用CSS Transitions設置哪些屬性的動畫

很多！但並非所有CSS屬性。

這是完整列表：

財產
背景
背景顏色
背景位置
背景尺寸
邊界
邊框顏色
邊框寬度
底邊
邊框底色
左下半徑半徑
右下邊界半徑
底邊寬度
左邊框
左邊框顏色
左邊框寬度
邊界半徑
右邊界
右邊框顏色
右邊框寬度
邊界間距
邊界頂
邊框頂部顏色
邊界左上角半徑
邊界右上半徑
邊框寬度
底部
盒子陰影
插入號顏色
夾子
顏色
列數
列間隙
列規則
列規則顏色
列規則寬度
列寬
列
內容
篩選
柔性
彈性基礎
彈性成長
彎曲收縮
字形
字體大小
字體大小調整
字體拉伸
字體粗細
網格區域
網格自動列
網格自動流
網格自動行
網格列端
網格列間隙
網格列開始
網格列
網格間隙
網格行尾
網格行間隙
網格行開始
網格行
網格模板區域
網格模板列
網格模板行
網格模板
網格
高度
剩下
字母間距
行高
利潤
底邊
左邊距
右邊距
上邊距
最大高度
最大寬度
最小高度
最小寬度
不透明
命令
大綱
輪廓色
輪廓偏移
輪廓寬度
填充
底部填充
左填充
向右填充
頂部填充
看法
透視起源
引號
正確的
標籤大小
文字裝飾
文字裝飾顏色
文字縮進
文字陰影
最佳
變形。
垂直對齊
能見度
寬度
字間距
索引

免費下載我的CSS手冊