CSS动画是指使用CSS规则控制元素在屏幕上产生动态效果的技术。CSS动画不仅可以使页面变得更加生动有趣，同时还可以是用户在访问网站时有更好的体验感受。

CSS动画主要包含两种方式：过渡（Transitions）和动画（Animations）。过渡是指元素状态的改变，比如颜色、大小等属性的改变，而动画则是指元素从一个状态到另一个状态的过程，比如元素从出现到消失等过程。

下面我们将使用一个简单的示例来演示如何通过CSS动画创建一个图形变化效果：

<style>
.shape {
width: 100px;
height: 100px;
border-radius: 50%;
background: #f00;
position: relative;
animation: spin 3s infinite linear;
}
@keyframes spin {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
</style>
<div class="shape"></div>

上述示例中，我们创建了一个圆形元素，并通过CSS动画让该元素不断旋转。具体来说，我们通过设定animation属性来指定元素执行的动画效果。该属性值分别包含四个属性值，分别是：动画名称（animation-name）、动画时长（animation-duration）、动画延时（animation-delay）和动画循环次数（animation-iteration-count）。

而在本例中，我们使用了一个称为keyframes的CSS语法规则定义了一个动画序列，通过设定元素的transform属性在不同的时间点上使元素发生变化。我们通过指定0%和100%的关键帧来创建了一个从0度到360度的旋转。

通过在页面中使用CSS动画，我们可以轻松创建出许多有趣的图形变化效果，给用户带来全新而美好的浏览体验。