3000 字總結(jié)CSS 中的過渡、動畫和變換詳解

作者：青竹悅 2025-05-30 03:20:00

CSS 過渡是一種平滑改變 CSS 屬性值的機(jī)制，允許屬性值在一定時間內(nèi)從一個值逐漸變化到另一個值，從而創(chuàng)建流暢的動畫效果。過渡只能用于具有中間值的屬性（如顏色、大小、位置等），不能用于 display 等離散屬性。

一、CSS 過渡（Transitions）

1. 基本概念

2. 核心屬性

transition-property

指定哪些 CSS 屬性參與過渡。可以是單個屬性（如width）、多個屬性（如width, height）或all（所有可過渡屬性）。

.element {
  transition-property: width, height;
}

transition-duration

指定過渡持續(xù)的時間，單位可以是秒（s）或毫秒（ms）。

.element {
  transition-duration: 0.5s; /* 0.5秒 */
}

transition-timing-function

定義過渡的速度曲線，常見值包括：

ease：默認(rèn)值，慢-快-慢
linear：勻速
ease-in：慢速開始
ease-out：慢速結(jié)束
ease-in-out：慢速開始和結(jié)束
cubic-bezier(n,n,n,n)：自定義貝塞爾曲線

.element {
  transition-timing-function: ease-in-out;
}

transition-delay

指定過渡開始前的延遲時間。

.element {
  transition-delay: 0.2s; /* 延遲0.2秒 */
}

3. 簡寫語法

.element {
  transition: width 0.5s ease-in-out 0.2s;
  /* 依次為：屬性 持續(xù)時間 時間函數(shù) 延遲時間 */
}

4. 觸發(fā)方式

過渡需要一個觸發(fā)條件才能生效，常見的觸發(fā)方式有：

:hover 偽類

.button {
  background-color: blue;
  transition: background-color 0.3s;
}

.button:hover {
  background-color: red;
}

:focus 偽類

.input {
  border: 1px solid #ccc;
  transition: border-color 0.3s;
}

.input:focus {
  border-color: blue;
}

JavaScript 動態(tài)修改

<button id="changeColor">變色</button>
<div id="box" style="width: 100px; height: 100px; background-color: red; transition: background-color 0.5s;"></div>

<script>
  document.getElementById('changeColor').addEventListener('click', () => {
    const box = document.getElementById('box');
    box.style.backgroundColor = box.style.backgroundColor === 'red' ? 'blue' : 'red';
  });
</script>

5. 應(yīng)用場景

按鈕懸停效果
導(dǎo)航欄交互
表單元素狀態(tài)變化
圖片縮放預(yù)覽

二、CSS 動畫（Animations）

1. 基本概念

CSS 動畫通過 @keyframes 規(guī)則定義一系列關(guān)鍵幀，然后將這些關(guān)鍵幀應(yīng)用到元素上，實(shí)現(xiàn)更復(fù)雜、更可控的動畫效果。與過渡不同，動畫不需要觸發(fā)條件，可以自動運(yùn)行。

2. @keyframes 規(guī)則

定義動畫的關(guān)鍵幀，格式如下：

@keyframes animationName {
  0% { /* 初始狀態(tài) */ }
  50% { /* 中間狀態(tài) */ }
  100% { /* 結(jié)束狀態(tài) */ }
}

也可以使用 from 和 to 表示 0% 和 100%：

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

3. 動畫屬性

animation-name

指定要應(yīng)用的動畫名稱，對應(yīng) @keyframes 定義的名稱。

.element {
  animation-name: fadeIn;
}

animation-duration

指定動畫的持續(xù)時間，單位為秒（s）或毫秒（ms）。

.element {
  animation-duration: 2s;
}

animation-timing-function

定義動畫的速度曲線，與過渡的 timing-function 類似。

.element {
  animation-timing-function: ease-in-out;
}

animation-delay

指定動畫開始前的延遲時間。

.element {
  animation-delay: 0.5s;
}

animation-iteration-count

指定動畫的播放次數(shù)，可以是數(shù)字或 infinite（無限循環(huán)）。

.element {
  animation-iteration-count: 3; /* 播放3次 */
}

animation-direction

指定動畫的播放方向，常見值包括：

normal：默認(rèn)值，正向播放
reverse：反向播放
alternate：正向和反向交替播放
alternate-reverse：反向和正向交替播放

.element {
  animation-direction: alternate;
}

animation-fill-mode

定義動畫在播放前和播放后的狀態(tài)，常見值包括：

none：默認(rèn)值，不應(yīng)用任何樣式
forwards：保持動畫結(jié)束時的狀態(tài)
backwards：在延遲期間應(yīng)用動畫的初始狀態(tài)
both：同時應(yīng)用 forwards 和 backwards

.element {
  animation-fill-mode: forwards;
}

animation-play-state

控制動畫的播放狀態(tài)，可以是 running 或 paused。

.element {
  animation-play-state: paused;
}

4. 簡寫語法

.element {
  animation: fadeIn 2s ease-in-out 0.5s 3 alternate forwards;
  /* 依次為：名稱 持續(xù)時間 時間函數(shù) 延遲時間 播放次數(shù) 播放方向 填充模式 */
}

5. 應(yīng)用場景

加載動畫
通知提示效果
頁面滾動動畫
互動游戲元素

三、CSS 變換（Transforms）

1. 基本概念

CSS 變換允許改變元素的形狀、大小和位置，而不影響文檔流。變換可以是 2D 或 3D 的，通過 transform 屬性實(shí)現(xiàn)。

2. 2D 變換

translate()

移動元素的位置，參數(shù)為 X 和 Y 方向的偏移量。

.element {
  transform: translate(50px, 20px); /* 向右移動50px，向下移動20px */
}

rotate()

旋轉(zhuǎn)元素，參數(shù)為旋轉(zhuǎn)角度（單位為 deg）。

.element {
  transform: rotate(45deg); /* 順時針旋轉(zhuǎn)45度 */
}

scale()

縮放元素，參數(shù)為 X 和 Y 方向的縮放比例。

.element {
  transform: scale(1.5, 0.8); /* 水平放大1.5倍，垂直縮小0.8倍 */
}

skew()

傾斜元素，參數(shù)為 X 和 Y 方向的傾斜角度。

.element {
  transform: skew(20deg, 10deg); /* 水平傾斜20度，垂直傾斜10度 */
}

matrix()

使用矩陣方式定義變換，包含六個參數(shù)：matrix(a, b, c, d, e, f)。

.element {
  transform: matrix(1.1, 0, 0, 1.1, 50, 0); /* 相當(dāng)于 scale(1.1) translate(50px, 0) */
}

3. 3D 變換

translate3d()

在 3D 空間中移動元素，參數(shù)為 X、Y、Z 方向的偏移量。

.element {
  transform: translate3d(50px, 20px, 100px);
}

rotate3d()

在 3D 空間中旋轉(zhuǎn)元素，參數(shù)為 (x, y, z, angle)，其中 x、y、z 定義旋轉(zhuǎn)軸。

.element {
  transform: rotate3d(1, 1, 0, 45deg); /* 繞X軸和Y軸的對角線旋轉(zhuǎn)45度 */
}

scale3d()

在 3D 空間中縮放元素，參數(shù)為 X、Y、Z 方向的縮放比例。

.element {
  transform: scale3d(1.5, 0.8, 2);
}

perspective()

設(shè)置透視效果，定義觀察者與 z=0 平面的距離。

.container {
  perspective: 1000px;
}

.element {
  transform: perspective(1000px) rotateY(45deg);
}

transform-style

指定子元素是否保留 3D 變換效果，值為 flat（默認(rèn)）或 preserve-3d。

.container {
  transform-style: preserve-3d;
}

backface-visibility

控制元素背面是否可見，值為 visible（默認(rèn)）或 hidden。

.card {
  backface-visibility: hidden;
}

4. 變換原點(diǎn)

transform-origin 屬性允許改變變換的原點(diǎn)位置，默認(rèn)值為元素中心 (50% 50%)。

.element {
  transform-origin: top left; /* 變換原點(diǎn)為左上角 */
  transform: rotate(45deg);
}

四、綜合應(yīng)用

1. 過渡與變換結(jié)合

.button {
background-color: blue;
color: white;
padding: 10px20px;
border: none;
transition: background-color 0.3s, transform 0.3s;
}

.button:hover {
background-color: red;
transform: scale(1.1);
}

2. 動畫與變換結(jié)合

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.ball {
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
animation: bounce 1s infinite;
}

3. 3D 卡片翻轉(zhuǎn)效果

.card {
width: 200px;
height: 200px;
perspective: 1000px;
position: relative;
}

.card-inner {
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
}

.card:hover.card-inner {
transform: rotateY(180deg);
}

.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}

.card-front {
background-color: #bbb;
color: black;
}

.card-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}

五、性能優(yōu)化

1. 使用 transform 和 opacity

transform 和 opacity 是性能最高的 CSS 屬性，因?yàn)樗鼈儾粫|發(fā)重排（reflow）和重繪（repaint），只會觸發(fā)合成（composite）。

2. 避免過多重排和重繪

頻繁修改會觸發(fā)重排和重繪的屬性（如 width、height、margin 等）會導(dǎo)致性能問題。盡量批量修改樣式，或者使用 transform 替代位置和大小的改變。

3. 使用 will-change

提前告知瀏覽器某個元素即將發(fā)生變化，有助于瀏覽器提前優(yōu)化。

.element {
  will-change: transform;
}

4. 硬件加速

通過 transform: translateZ(0) 或 transform: translate3d(0,0,0) 觸發(fā)硬件加速。

.element {
  transform: translateZ(0);
}

六、瀏覽器兼容性

1. 前綴問題

早期的瀏覽器需要添加前綴支持，現(xiàn)在大多數(shù)現(xiàn)代瀏覽器已經(jīng)不需要了，但為了兼容性，仍然可以添加：

.element {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}