CSS3中的收藏動畫是一種利用CSS3技術制作的動畫效果，可以在網頁設計中增添更多的交互體驗，提升網頁的美觀度和用戶體驗。以下是一些常用的CSS3收藏動畫效果。

/* 實現從右側滑出的效果 */
@keyframes slideInRight {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
.slide-in-right {
animation: slideInRight .5s ease-out;
}
/* 實現旋轉的效果 */
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
.rotate {
animation: rotate 1s linear infinite;
}
/* 實現縱向翻轉的效果 */
@keyframes flip {
from {
transform: perspective(400px) rotateX(0);
}
to {
transform: perspective(400px) rotateX(360deg);
}
}
.flip {
animation: flip 1s ease-out;
}
/* 實現閃爍的效果 */
@keyframes blink {
50% {
opacity: 0;
}
}
.blink {
animation: blink 1s linear infinite;
}
/* 實現漸隱效果 */
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fade-out {
animation: fadeOut .5s linear;
}

以上是一些常見的CSS3收藏動畫效果，可以根據實際需求進行調整和修改，達到更好的效果。同時，為了避免影響網頁的性能，推薦采用CSS3中的動畫屬性來實現收藏動畫效果，減少過多的JavaScript腳本。