CSS3 animation 輪播是一種簡單而又美觀的網頁設計方式，它可以實現在網頁中以動態形式展示圖片或文字信息的效果。下面我們來看一下如何使用 CSS3 animation 輪播。

HTML 代碼
CSS 代碼
.slider {
width: 100%;
height: 500px;
overflow: hidden;
}
.slider img {
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
/* 動畫實現 */
animation: slide 6s ease infinite;
}
/* 動畫代碼 */
@keyframes slide {
0% {
opacity: 0;
transform: translateX(0);
}
16.7% {
opacity: 1;
transform: translateX(0);
}
33.3% {
opacity: 1;
transform: translateX(-100%);
}
50% {
opacity: 0;
transform: translateX(-100%);
}
66.7% {
opacity: 0;
transform: translateX(-100%);
}
83.4% {
opacity: 1;
transform: translateX(-100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}

首先，在 HTML 代碼中，我們用 <div> 元素包含img元素，每個 <img> 元素代表要展示的圖片，alt屬性是圖片的文字描述。

然后，在 CSS 代碼中，我們設置 slider 元素的寬高和 overflow 屬性，使它所包含的子元素超出 slider 元素可視范圍時隱藏。接著，我們設置 <img> 元素的寬高、位置和 opacity 屬性，其中 position 屬性值為 absolute，使得 <img> 元素可以在 slider 外上下層疊顯示。

最后，我們通過 keyframes 關鍵字來創建動畫，定義了一個名為 slide 的動畫，它是一個由七個關鍵幀構成的動畫，每個關鍵幀代表了一個動畫狀態。我們將這個動畫應用在 <img> 元素中，讓它們在一定時間內無限循環，并且由透明變為不透明、從起始位置移動到終止位置。