CSS動畫是網頁設計中經常用到的技術，能夠讓頁面更加生動有趣，提升用戶的體驗感。下面我們來討論一下如何設置CSS動畫效果。

首先，需要用到CSS的animation屬性。這個屬性有8個子屬性，分別是：animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode和animation-play-state。這些屬性分別用于定義動畫的名稱、時長、緩動函數、延遲、播放次數、播放方向、填充模式和播放狀態(tài)。

.example {
animation-name: myAnimation;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-play-state: running;
}
@keyframes myAnimation {
0% { transform: translateY(0); }
50% { transform: translateY(100px); }
100% { transform: translateY(0); }
}

上面的代碼展示了如何設置CSS動畫效果。首先，在.example選擇器中，我們設置動畫的各項屬性，如動畫名稱、時長、緩動函數、延遲、播放次數、播放方向、填充模式和播放狀態(tài)。然后，在@keyframes選擇器中我們定義了動畫的關鍵幀，即動畫從哪個狀態(tài)到哪個狀態(tài)。這里我們設置了三個關鍵幀，分別控制元素從初始位置到中間位置再到結束位置的過程。

最后，需要注意的是，CSS動畫不兼容IE9及以下版本的瀏覽器，建議設置動畫效果時要注意瀏覽器兼容性。