/

CSS過渡的入門指南

CSS過渡的入門指南

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

CSS過渡介紹

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

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

CSS過渡由以下屬性定義：

屬性 描述
transition-property 應過渡的CSS屬性
transition-duration 過渡的持續時間
transition-timing-function 動畫使用的時間函數（常見值：linear，ease）。默認值：ease
transition-delay 開始動畫之前的可選秒數

transition屬性是一個方便的簡寫：

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

CSS過渡的示例

以下代碼實現了一個CSS過渡：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.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); /* 淺色 */
}

在懸停在.one和.three元素上時，即紫色圓圈，有一個過渡動畫，平滑地改變背景顏色，而黃色圓圈則不會，因為它們沒有定義transition屬性。

過渡的時間函數值

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

這裡有一些簡單的值可以使用：

值
linear
ease
ease-in
ease-out
ease-in-out

這個Glitch展示了這些值在實踐中的工作方式。

您可以使用cubic bezier curves創建完全定制的時間函數。這比較高級，但基本上這些函數中的任何一個都使用bezier曲線構建。我們有方便的名稱，因為它們是常見的值。

瀏覽器DevTools中的CSS過渡

瀏覽器DevTools提供了一個很好的可視化過渡的方式。

這是Chrome：

在Chrome DevTools中調試CSS過渡

這是Firefox：

在Firefox DevTools中調試CSS過渡

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

可以使用CSS過渡動畫的屬性

非常多！但不是所有CSS屬性。

以下是完整列表：

屬性
background
background-color
background-position
background-size
border
border-color
border-width
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-width
border-left
border-left-color
border-left-width
border-radius
border-right
border-right-color
border-right-width
border-spacing
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-width
bottom
box-shadow
caret-color
clip
color
column-count
column-gap
column-rule
column-rule-color
column-rule-width
column-width
columns
content
filter
flex
flex-basis
flex-grow
flex-shrink
font
font-size
font-size-adjust
font-stretch
font-weight
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column-end
grid-column-gap
grid-column-start
grid-column
grid-gap
grid-row-end
grid-row-gap
grid-row-start
grid-row
grid-template-areas
grid-template-columns
grid-template-rows
grid-template
grid
height
left
letter-spacing
line-height
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width
opacity
order
outline
outline-color
outline-offset
outline-width
padding
padding-bottom
padding-left
padding-right
padding-top
perspective
perspective-origin
quotes
right
tab-size
text-decoration
text-decoration-color
text-indent
text-shadow
top
transform.
vertical-align
visibility
width
word-spacing
z-index