CSS3 animate svg 是一種使用 CSS3 動畫技術實現對 svg 圖像的動態效果控制方法，可以通過設置不同的動畫參數，讓 svg 圖像在頁面中呈現出豐富的動態效果，增強頁面交互性及吸引力。

代碼示例：
// SVG 圖像代碼// CSS3 動畫效果代碼
@keyframes anim {
0%   {transform: translateX(0px);}
50%  {transform: translateX(200px); fill: red;}
100% {transform: translateX(0px);}
}
#rect {
animation: anim 2s infinite;
animation-direction: alternate; //動畫反轉
animation-timing-function: ease-in-out; //動畫緩動
}

在代碼示例中，我們定義了一個簡單的矩形 svg 圖像，并通過設置 anim 動畫參數實現了矩形的平移和顏色填充效果。其中，translateX(0px) 表示元素 x 軸方向平移距離為 0，fill 表示元素顏色填充，根據設置生效。

通過 animation 屬性設置動畫參數，可以使動畫效果在指定的時間內循環執行；通過 animation-direction 設置動畫反轉，可以讓動畫來回循環；通過 animation-timing-function 設置動畫緩動，可以讓動畫執行過程中呈現出自然、順暢的過渡效果。

CSS3 animate svg 動畫技術可以實現眾多復雜的 svg 圖像動態效果，如旋轉、放大、縮小、路徑動畫等，有效提升頁面的交互性和藝術性，是 web 開發者必備的技能之一。