css给宽度发生变化加上动画

CSS可以结合动画技术，如`@keyframes`规则，来创建当元素宽度变化时的动画效果。以下是一个简单的例子：

/* 定义关键帧动画 */
@keyframes width-change {
  0% { width: 0; }
  50% { width: 100px; } /* 中间宽度变化的位置 */
  100% { width: 200px; } /* 结束状态 */
}

/* 应用动画到某个元素上 */
.element {
  width: 0; /* 初始宽度 */
  animation: width-change 2s ease-in-out; /* 动画名称、持续时间、缓动函数 */
}

在这个例子中，`.element`元素会在两秒内从宽度为0逐渐变宽到200px，模拟了宽度变化的过程。你可以通过改变`width`属性的初始值和结束值以及动画的持续时间和缓动函数来自定义动画效果。