把鼠标指针放到某div元素上，其宽度会从50px逐渐变为200px

好的，可以使用CSS动画来实现这个效果。可以用以下代码：

CSS代码：

div {
  width: 50px;
  height: 50px;
  background-color: red;
  transition: width 1s;
}

div:hover {
  width: 200px;
}

HTML代码：

<div></div>

解释一下：在初始状态下，div元素的宽度为50像素，背景颜色为红色。在:hover状态下，当鼠标指针悬停在div元素上时，宽度将过渡到200像素，并在1秒钟内完成这个动画效果。