CSS圖文動畫是指利用CSS技術實現的一種動畫效果，可以讓網頁中的文字、圖像、背景等元素在頁面上實現不同的動態效果，增強了視覺效果以及用戶體驗。

.picture:hover {
transform: rotate(360deg);
transition: transform 1s;
}

上述代碼展示了一個簡單的圖片旋轉動畫效果，當鼠標經過圖片時，圖片會在1秒內立即以360度的速度進行旋轉。

下面介紹幾個常見的CSS圖文動畫。

漸變動畫

.gradient {
background-image: linear-gradient(to right, red, yellow, green);
animation: gradient 5s ease-in-out infinite;
}
@keyframes gradient {
0% {background-position:0% 50%}
50% {background-position:100% 50%}
100% {background-position:0% 50%}
}

上述代碼展示了一個漸變動畫效果，當頁面加載時，背景色由紅色漸變至黃色，再由黃色漸變至綠色，循環往復，總時間為5秒。

閃爍動畫

.blink {
animation: blink 1s linear infinite;
}
@keyframes blink {
0% {opacity: 0}
50% {opacity: 1}
100% {opacity: 0}
}

上述代碼展示了一個閃爍動畫效果，當頁面加載后，元素會不斷地在1秒內變化透明度，使其在頁面中呈現出不斷閃爍的效果。

滑動動畫

.slide-in {
animation: slide-in 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes slide-in {
0% {
transform: translateY(-100%);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}

上述代碼展示了一個滑動動畫效果，當頁面加載后，元素會從網頁頂部滑入，直到完全展示出來，時間為1秒，使用了cubic-bezier函數使過渡效果更為平滑。

以上就是CSS圖文動畫的使用示例，CSS圖文動畫在頁面設計中發揮了重要作用，可以豐富、美化頁面效果，提高用戶體驗，非常實用。