要實現動畫效果，可以使用CSS的@keyframes規則和animation屬性。@keyframes用于定義動畫的關鍵幀，而animation屬性則將這些關鍵幀應用到元素上。
下面是一個簡單的示例，展示了如何使用@keyframes和animation屬性來創建一個元素從左到右移動的動畫效果：
/* 定義關鍵幀 */
@keyframes moveRight {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100px);
}
}
/* 將關鍵幀應用到元素上 */
.box {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: 0;
animation: moveRight 2s linear infinite; /* 應用動畫效果 */
}
在這個示例中，我們首先使用@keyframes定義了一個名為moveRight的關鍵幀動畫。在動畫開始時（0%），元素的transform屬性設置為translateX(0)，表示元素位于起始位置。在動畫結束時（100%），元素的transform屬性設置為translateX(100px)，表示元素向右移動了100像素。
然后，我們使用animation屬性將這個關鍵幀動畫應用到名為.box的元素上。animation屬性的值包含了動畫的名稱（moveRight）、持續時間（2s）、速度曲線（linear）以及動畫的循環次數（infinite）。這意味著動畫將持續2秒，以勻速進行，并且會無限次循環播放。
你可以根據需要自定義關鍵幀和動畫屬性，以實現不同的動畫效果。此外，還可以使用JavaScript來動態地修改元素的樣式，從而實現更復雜的動畫效果。
