CSS是構建Web頁面的重要基石，可以實現頁面的布局，樣式和動畫效果。其中動畫效果是吸引眼球的關鍵因素之一，本文將介紹如何使用純CSS代碼實現動畫效果。

.slide-in {
position: relative;
left: -100%;
animation: slide-in 1s forwards;
}
@keyframes slide-in {
to {
left: 0;
}
}

上述代碼實現了一個元素從左側滑入的動畫效果，首先定義了一個類名為slide-in的樣式，將元素向左偏移100%的距離，并使用animation屬性以及關鍵幀的方式定義動畫效果，其中to關鍵幀表明元素最終停留在的位置，這里是左側不偏移的位置。

.rotate {
animation-name: rotate;
animation-duration: 1s;
animation-iteration-count: infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

上述代碼實現了元素持續旋轉的效果，同樣使用animation屬性和關鍵幀的方式定義動畫效果，在關鍵幀中from表示初始狀態，to表示結束狀態，這里的transform屬性是用來實現旋轉效果的。

.bounce {
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
}
@keyframes bounce {
from, 20%, 53%, 80%, to {
transform: translate3d(0,0,0);
}
40%, 43% {
transform: translate3d(0, -30px, 0);
}
70% {
transform: translate3d(0, -15px, 0);
}
90% {
transform: translate3d(0,-4px,0);
}
}

上述代碼實現了元素在垂直方向上彈跳的效果，動畫效果更加復雜，需要精細的動畫控制，在關鍵幀中通過百分比來控制元素的位置和形態，最終實現彈跳效果。

以上是幾個比較常見的實現動畫效果的純CSS代碼，當然還有更多其他的動畫效果，非常適合創造性地應用在網頁設計中。