CSS3是經常用于美化網頁的一種樣式語言。過渡與動畫是其中兩個常用的屬性。本文將為您介紹CSS3過渡與動畫的用法及效果。

CSS3過渡是一種從一個CSS屬性值平滑地過渡到另一個CSS屬性值的方法。使用過渡，您可以改變元素屬性的值，同時添加一些過渡效果，使變化逐漸發生。

/* 實現過渡效果 */
transition: property duration timing-function delay;

以上代碼中：

property：需要添加過渡效果的屬性，如color、background-color等

duration：屬性變化所需要的時間，以秒或毫秒為單位

timing-function：屬性變化過程中的動畫曲線，如linear、ease-in等

delay：屬性變化開始之前的延遲時間，以秒或毫秒為單位

例如，以下代碼會在按鈕hover時添加過渡效果：

button {
transition: background-color 0.5s ease-in-out 0s;
}
button:hover {
background-color: #555;
}

CSS3動畫是一種在一定時間間隔內，描述元素從一種狀態過渡到另一種狀態的方法。使用動畫，您可以定義元素的關鍵框架（關鍵幀），并修改每個框架樣式的CSS屬性。

/* 實現動畫效果 */
@keyframes animation-name {
/* 定義動畫關鍵幀 */
}
animation: name duration timing-function delay iteration-count direction fill-mode play-state;

以上代碼中：

animation-name：動畫的名稱

duration：動畫播放的時間，以秒或毫秒為單位

timing-function：動畫執行時的緩動函數，如linear、ease-in等

delay：動畫開始前的延遲時間，以秒或毫秒為單位

iteration-count：動畫重復次數，可以設置數值或infinite（無限循環）

direction：動畫循環的方向，可以是normal（正向）和alternate（交替）

fill-mode：動畫在播放前和播放后的狀態，可以是none、forwards、backwards、both

play-state：動畫播放的狀態，可以是paused（暫停）和running（運行）

例如，以下代碼會實現一個球在一個容器中滾動的動畫效果：

.container {
position: relative;
width: 200px;
height: 200px;
border: 1px solid #000;
}
.ball {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
background-color: #f00;
animation: roll 2s linear 0s infinite normal;
}
@keyframes roll {
from {
left: 0;
top: 0;
}
to {
left: 150px;
top: 150px;
}
}

在本文中，您已學習了CSS3過渡與動畫的用法和效果，這些屬性讓您可以更好地為網頁添加動態、優雅的效果。