CSS自動動畫效果是一種通過CSS來設置動畫的方式，它可以讓網頁有更加生動的展示效果，吸引用戶的注意力。在實現CSS自動動畫效果時，我們通常使用如下代碼：

/* 定義動畫 */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* 應用動畫 */
div {
animation-name: example;
animation-duration: 4s;
}

這段代碼定義了名為“example”的動畫，將其應用于<div>標簽中。其中，animation-name屬性指定了所要應用的動畫名稱，animation-duration屬性指定了動畫的時長。

在實際情況中，我們經常通過修改CSS樣式來改變動畫效果。比如，下面代碼將樣式改為由紅色漸變到黃色：

/* 定義動畫 */
@keyframes example {
0% {background-color: red;}
50% {background-color: orange;}
100% {background-color: yellow;}
}
/* 應用動畫 */
div {
animation-name: example;
animation-duration: 4s;
}

以上代碼使用了關鍵幀（@keyframes）來定義動畫效果。通過設置不同百分比的樣式，我們可以實現逐幀動畫，使動畫效果更加細膩。

除了使用關鍵幀，我們還可以利用CSS動畫屬性來實現動畫效果。下面是一個例子：

/* 定義動畫 */
div {
transition: width 2s;
}
/* 在鼠標懸停時觸發動畫 */
div:hover {
width: 300px;
}

以上代碼將一個<div>標簽的寬度設置為2秒的過渡動畫，在鼠標懸停時將寬度增加到300像素。這種方式的優點是簡單易用，效果也非常流暢，但相對于關鍵幀動畫也比較單一。

CSS自動動畫效果通過設置CSS樣式實現動畫效果，可以讓網頁更加生動有趣。我們可以通過關鍵幀和CSS動畫屬性來實現動畫效果，以滿足不同的需求。