CSS小動畫素材非常適合網頁設計中的元素動效，可以給頁面增加生動感，提高用戶體驗。以下是一些常見的CSS小動畫素材：

/*閃爍動畫*/
.blink {
animation: blink .5s linear infinite alternate;
}
@keyframes blink {
from {opacity: 1;}
to {opacity: 0;}
}
/*旋轉動畫*/
.rotate {
animation: rotate 1s linear infinite;
}
@keyframes rotate {
from {transform: rotate(0);}
to {transform: rotate(360deg);}
}
/*彈跳動畫*/
.bounce {
animation: bounce 1s ease-in-out infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}
/*漸顯漸隱動畫*/
.fade {
animation: fade 1.5s ease-in-out infinite alternate;
}
@keyframes fade {
from {opacity: 0;}
to {opacity: 1;}
}
/*縮放動畫*/
.zoom {
animation: zoom .5s ease-in-out infinite alternate;
}
@keyframes zoom {
from {transform: scale(1);}
to {transform: scale(1.1);}
}

以上動畫可以通過CSS的animation屬性進行實現，并通過keyframes定義動畫的關鍵幀。可以根據自己的需求修改動畫的參數，如動畫時間和循環次數等。

需要注意的是，在使用CSS小動畫素材時，要注意控制動畫的數量和時間，過多過長的動畫會影響頁面加載速度和用戶體驗。合理地運用CSS小動畫素材，可以為網頁增色不少，讓用戶留下更好的印象。