CSS幀動畫是一種利用CSS來制作動畫效果的技術。相比于使用JavaScript來實現動畫效果，CSS幀動畫的好處是可以大大減少代碼量并提高網頁加載速度。本文將介紹如何使用CSS幀動畫來制作素材。

在利用CSS幀動畫制作素材前，我們需要先了解如何使用CSS來定義動畫。下面是一個簡單的示例：

/* 定義動畫 */
@keyframes move {
from {left: 0px;}
to {left: 300px;}
}
/* 使用動畫 */
div {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
animation: move 2s linear infinite;
}

上面的代碼定義了一個名為move的動畫，該動畫從左邊的0px位置移動到右邊的300px位置。然后將該動畫應用到一個div標簽上，使得該div標簽會一直往右邊移動并始終重復播放。

有了上述基礎知識，我們就可以開始制作素材了。以制作一個簡單的loading圖標為例：

/* 定義動畫 */
@keyframes loading {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
/* 使用動畫 */
.loading {
width: 50px;
height: 50px;
border: 8px solid #f3f3f3;
border-top: 8px solid #3498db;
border-radius: 50%;
animation: loading 1s linear infinite;
}

上述代碼定義了一個名為loading的動畫，該動畫會使一個圓形圖標一直旋轉。然后將該動畫應用到一個類名為loading的元素上，使得該元素會一直旋轉并重復播放，從而形成loading效果。

最后，我們需要注意的是，在使用CSS幀動畫時，我們需要考慮到動畫的效率和流暢度。盡量避免使用大量關鍵幀和復雜的動畫效果，以確保頁面在不犧牲用戶體驗的前提下，可以流暢地運行。