# Transitions 過渡

過渡有助於在元素的不同狀態之間創建一個平滑的動畫。

持續時間和過渡類型可以被訂製，常見的用例是為元素的懸停狀態創建平滑的過渡，以便它們不會在懸停時突然改變。

1. 為按鈕的懸停狀態設置樣式
2. 設置過渡，使懸停時的動畫更加流暢

## 為按鈕的懸停狀態設置樣式

1. 選擇按鈕
2. 添加盒狀陰影，並對其進行風格化處理。
3. 轉到懸停狀態
4. 增加陰影的強度和距離
5. 切換回無狀態

## 設置過渡，使懸停時的動畫更加平滑

1. 添加過渡，從屬性下拉選單中選擇盒狀陰影
2. 添加500ms的持續時間
3. 保持緩和狀態不變
4. 將鼠標懸停在按鈕上，可以看到陰影的強度和距離的平滑過渡

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2Ff1kSvzA27mYIa09ouVcV%2Fimage.png?alt=media\&token=82d30b59-eb87-44f3-9956-a1ee661961bc)

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2Fkq3G41xF6wfAxjAEFOh1%2Fimage.png?alt=media\&token=3633105e-93da-44d6-ba3f-839bc17097a3)