CSS創意動圖是一種用CSS來制作動畫效果的藝術形式。相比于傳統的動畫制作方式，CSS動畫具有更加簡便的方式來制作出生動的動畫效果。

通常，制作CSS動畫，需要借助于一些關鍵幀動畫的概念，通過給元素添加不同狀態下的CSS屬性來實現動畫效果。比如我們可以通過下面的CSS代碼制作一個簡單的旋轉動畫:

.box{
width: 100px;
height: 100px;
background: #f00;
position: relative;
animation: rotate 2s linear infinite;
transform-origin: center center;
}
@keyframes rotate {
0% {transform: rotate(0);}
100% {transform: rotate(360deg);}
}

在這段代碼中，我們給一個類名為"box"的元素添加了一個animation屬性，指定了使用名為"rotate"的動畫效果，持續時間為2秒，循環次數為無限循環。同時，我們也指定了動畫的旋轉中心為元素的中心。

而關鍵幀動畫本身也是CSS創意動圖中重要的組成部分。例如，我們希望元素在移動過程中可以產生一些"彈性感"，此時我們可以利用關鍵幀動畫，通過修改元素的位置屬性和速率屬性，來實現這一效果。下面是一個簡單的動畫示例:

.box{
width: 100px;
height: 100px;
background: #f00;
position: absolute;
left: 0;
top: 0;
animation: stretch 2s ease-in-out infinite;
}
@keyframes stretch {
0%, 100% {left: 0;}
50% {left: 100px;}
}

在這段代碼中，我們給元素添加了一個關鍵幀動畫，通過設置left屬性，在0%和100%狀態下保持left屬性為0，而在50%狀態下將left屬性設置為100px，從而實現動畫效果。

總的來說，CSS創意動圖是一種高效的動畫制作方式，它可以在不借助外部庫的情況下，快速制作出驚艷的動畫效果。