CSS動(dòng)畫是網(wǎng)頁設(shè)計(jì)中經(jīng)常用到的技術(shù)，能夠讓頁面更加生動(dòng)有趣，提升用戶的體驗(yàn)感。下面我們來討論一下如何設(shè)置CSS動(dòng)畫效果。

首先，需要用到CSS的animation屬性。這個(gè)屬性有8個(gè)子屬性，分別是：animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode和animation-play-state。這些屬性分別用于定義動(dòng)畫的名稱、時(shí)長(zhǎng)、緩動(dòng)函數(shù)、延遲、播放次數(shù)、播放方向、填充模式和播放狀態(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); }
}

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

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