CSS3 動畫是現代 web 開發的重要組成部分之一，它可以幫助我們創建各種各樣有趣的效果，比如跑馬燈。下面我們將介紹如何使用 CSS3 實現一個簡單的跑馬燈動畫。

/* CSS 代碼片段 */
.marquee {
white-space: nowrap;
overflow: hidden;
animation: marquee 5s linear infinite;
}
@keyframes marquee {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}

首先，我們需要創建一個 HTML 元素來包裝跑馬燈內容。

<div class="marquee">
This is a simple marquee animation demonstration.
</div>

然后，應用上述 CSS 代碼片段，其中包括以下幾個部分：

• white-space: nowrap;禁止文本換行。
• overflow: hidden;隱藏溢出內容，以便實現跑馬燈效果。
• animation: marquee 5s linear infinite;應用名為 marquee 的動畫，持續 5 秒，線性過渡，無限循環。

接著，我們需要定義動畫效果，也就是利用@keyframes規則定義動畫的各個關鍵幀。

• 0% { transform: translateX(100%); }在動畫開始時，文本位于容器的最右側。
• 100% { transform: translateX(-100%); }在動畫結束時，文本位于容器的最左側，同時我們使用translateX函數來實現平移效果。

最終，我們得到了一個簡單但有趣的跑馬燈動畫，它可以應用于網站標題、廣告宣傳等場合。