CSS 动画过渡：改变宽度效果

可以使用 CSS 的 transition 属性来实现宽度改变的动画过渡效果。

首先需要设置元素的初始宽度和过渡时间：

.element {
  width: 100px; /* 初始宽度 */
  transition: width 0.3s ease-in-out; /* 过渡时间和缓动函数 */
}

然后在需要改变宽度的时候，使用 JavaScript 或者 CSS 来改变元素的宽度：

.element {
  width: 200px; /* 最终宽度 */
}

当元素的宽度改变时，过渡效果就会自动触发，实现平滑的动画过渡效果。

完整代码示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .element {
        width: 100px;
        transition: width 0.3s ease-in-out;
        background-color: #ccc;
        padding: 10px;
        text-align: center;
      }
      .element:hover {
        width: 200px;
      }
    </style>
  </head>
  <body>
    <div class='element'>Hover me</div>
  </body>
</html>