CSS3動(dòng)畫集是前端開發(fā)中常用的一種技術(shù)，它可以為我們的頁面增加一些生動(dòng)的元素，給用戶帶來更好的交互體驗(yàn)。下面是幾個(gè)我們常用的CSS3動(dòng)畫集。

.fade-in {
animation: fadeIn ease 1s;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

這段代碼實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的淡入動(dòng)畫。通過設(shè)置動(dòng)畫的關(guān)鍵幀，從0%到100%讓元素逐漸變成不透明。

.slide-in-left {
animation: slideInLeft ease 1s;
}
@keyframes slideInLeft {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}

這段代碼實(shí)現(xiàn)了一個(gè)從左邊滑入的動(dòng)畫。通過設(shè)置元素的初始位置，在動(dòng)畫中將元素從左邊滑入頁面中。

.rotate {
animation: rotate 2s infinite linear;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

這段代碼實(shí)現(xiàn)了一個(gè)360度旋轉(zhuǎn)的動(dòng)畫。通過設(shè)置元素從0度到360度的旋轉(zhuǎn)，使得元素不斷旋轉(zhuǎn)。

以上三種動(dòng)畫集只是CSS3動(dòng)畫的冰山一角，隨著技術(shù)的不斷發(fā)展，CSS3動(dòng)畫也將越來越常用，遇到不同的需求時(shí)，不同的動(dòng)畫集也將被不斷創(chuàng)造。