最近我學習了一些CSS動畫制作的基礎知識，便開始了自己的動畫制作探索。在這里，我想分享一些我自制的CSS動畫效果。

.slide {
animation-name: slide;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(50px);
}
}

上面這個CSS代碼是用來制作一個永久往返移動的動畫效果。首先我們在CSS選擇器中指定該元素需要使用這個動畫。接著，在@keyframes關鍵字中我們定義了動畫的細節，包括它的起點、終點和時間長度。在這個例子中，我們定義了一個從左到右50px的移動動畫，重復無限次，并在末狀態后反向進行。

.spin {
animation-name: spin;
animation-duration: 3s;
animation-timing-function: ease-out;
animation-iteration-count: infinite;
}
@keyframes spin {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}

這段代碼則是用來制作一個永久的旋轉動畫效果。@keyframes相當于一個幀，我們在里面定義了從起點到終點應該如何旋轉，即從0度到360度旋轉。我們也可以在動畫期間指定使用哪種時間函數，例如這里的ease-out表示動畫在結束時逐漸減速。

有了這些基礎知識，我們可以開始自己動手做一些很棒的CSS動畫效果了！