CSS動畫效果可讓網頁變得更加生動有趣。下面是幾個簡單的CSS動畫效果，讓我們來學習一下它們的代碼。 首先，我們來看一個簡單的淡入淡出效果：

這是一個文字

p {
opacity: 0; /* 初始時設置透明度為0 */
animation: fade-in 2s ease-in-out; /* 設置動畫名稱、持續時間和動畫效果 */
}
@keyframes fade-in {
from { opacity: 0; } /* 動畫開始時透明度為0 */
to { opacity: 1; } /* 動畫結束時透明度為1 */
}

接下來是一個從左到右移動的效果：

這是另一個文字

p {
position: relative; /* 設定相對位置 */
left: -100%; /* 初始時向左偏移100% */
animation: slide-in 2s ease-in-out; /* 設置動畫名稱、持續時間和動畫效果 */
}
@keyframes slide-in {
from { left: -100%; } /* 動畫開始時向左偏移100% */
to { left: 0; } /* 動畫結束時不偏移 */
}

最后，我們來看看一個旋轉效果：

這是第三個文字

p {
display: inline-block; /* 行內塊元素 */
animation: spin 2s linear infinite; /* 設置動畫名稱、持續時間和動畫效果（線性） */
}
@keyframes spin {
from { transform: rotate(0deg); } /* 動畫開始時不旋轉 */
to { transform: rotate(360deg); } /* 動畫結束時旋轉360度 */
}

以上就是三個簡單的CSS動畫效果的代碼實現，大家可以根據自己的需求進行修改和使用。