隨著互聯(lián)網(wǎng)技術(shù)的快速發(fā)展，CSS3動(dòng)畫的應(yīng)用越來(lái)越廣泛。下面就給大家介紹幾個(gè)經(jīng)典的CSS3動(dòng)畫案例。

/* 1. 旋轉(zhuǎn)動(dòng)畫 */
.rotate {
animation-name: rotate;
animation-duration: 2s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
} 
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

上述代碼實(shí)現(xiàn)了一個(gè)元素的自旋轉(zhuǎn)動(dòng)畫，并設(shè)置了動(dòng)畫的時(shí)間、延遲、循環(huán)次數(shù)以及動(dòng)畫的緩動(dòng)效果。

/* 2. 漸變背景顏色 */
.gradient {
background: linear-gradient(to right, #f12711, #f5af19);
background-size: 200% auto;
color: #fff;
animation: gradient 10s ease-in-out infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

上述代碼實(shí)現(xiàn)了一個(gè)使用漸變背景色并呈現(xiàn)循環(huán)動(dòng)畫的元素，同時(shí)設(shè)置了動(dòng)畫時(shí)間和緩動(dòng)效果。

/* 3. 縮放動(dòng)畫 */
.zoom {
animation-duration: 2s;
animation-name: zoom;
animation-iteration-count: infinite;
animation-direction: alternate; 
}
@keyframes zoom {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}

上述代碼實(shí)現(xiàn)了一個(gè)元素的縮放動(dòng)畫，設(shè)置的動(dòng)畫時(shí)間、循環(huán)次數(shù)及動(dòng)畫方向。

以上三個(gè)CSS3動(dòng)畫案例是比較經(jīng)典的，當(dāng)然你可以根據(jù)自己的需要對(duì)上述代碼進(jìn)行修改和擴(kuò)展。