CSS背景色填充动画是一种常见的网页动效，可以增加页面的视觉效果，提升用户的体验感。

.box {
width: 200px;
height: 200px;
background: linear-gradient(135deg, #8e2de2, #4a00e0, #ff4d4d);
background-size: 600% 600%;
animation: gradient 12s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0 0;
}
50% {
background-position: 100% 100%;
}
100% {
background-position: 0 0;
}
}

上述代码实现了一个背景色填充动画效果。首先定义一个大小为200x200的矩形div，并设置背景为一个从左下到右上渐变的三色背景。

接着设置背景样式为600% x 600%，意味着背景图片会覆盖整个盒子，最后通过animation属性指定动画，其中gradient为动画名称，12s为动画时长，ease为动画缓动函数，infinite为动画循环次数。

最后通过@keyframes指定动画的场景，0%表示动画开始时的状态，50%表示动画播放到一半时的状态，100%表示动画结束后的状态。在此动画场景中，每个关键帧指定了不同的背景位置，通过不断重复播放这些背景位置之间的过渡，就可以实现背景色填充的动画效果。