CSS3提供了許多強大的功能，其中包括字圖動畫。使用字圖動畫可以創造出獨特的效果，讓網頁更加生動有趣。

@keyframes text-animation {
0% {
background-position: left top;
}
100% {
background-position: right bottom;
}
}
h1 {
font-size: 4em;
text-align: center;
background-image: url('text-image.png');
background-size: 200%;
animation-name: text-animation;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}

上面的代碼演示了如何使用CSS3字圖動畫。首先定義了一個名為text-animation的關鍵幀動畫，其中包括了兩個狀態，0%表示動畫開始時的狀態，100%表示動畫結束時的狀態。在狀態1中，背景圖片的位置位于左上角，在狀態100%中，背景圖片的位置位于右下角。

接著，在h1選擇器下，設置了字體大小，居中對齊，背景圖片以及背景大小。通過animation-name屬性指定使用名為text-animation的動畫，在animation-duration屬性中設置動畫持續時間為5秒，在animation-iteration-count屬性中設置動畫無限循環，在animation-direction屬性中指定動畫交替播放，在animation-timing-function屬性中設置動畫的緩動效果為先加速后減速。

這樣就實現了一個簡單的CSS3字圖動畫，當頁面加載時，字體背景圖片會逐漸移動，營造出動態的效果。