CSS right: 0定位下，如何实现从右向左的宽度缩小动画？

在CSS布局中，当元素设置了position: absolute且right: 0的定位规则后，直接修改width属性做缩小动画，元素会整体向左移动，无法达到从右向左收缩的效果。这是因为right: 0是固定元素右边缘相对于父容器右边缘的距离，宽度变小时，元素左边缘会向左移动，视觉上就是整体左移。

方案一：使用transform: scaleX实现

transform的缩放属性不会影响元素的定位规则，只需要调整缩放的原点即可实现从右向左的收缩效果。默认transform-origin是元素中心，我们需要将其设置为右边缘。

完整代码示例

/* 父容器需要设置相对定位 */
.parent {
  position: relative;
  width: 500px;
  height: 200px;
  background-color: #f0f0f0;
}

/* 目标元素 */
.target {
  position: absolute;
  right: 0;
  top: 50px;
  width: 300px;
  height: 100px;
  background-color: #409eff;
  /* 设置缩放原点为右边缘 */
  transform-origin: right center;
  /* 定义动画 */
  animation: shrinkFromRight 2s ease forwards;
}

/* 定义从右向左缩小的动画 */
@keyframes shrinkFromRight {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

方案说明

• transform-origin: right center让缩放围绕元素右边缘进行，宽度缩小时就会从右向左收缩
• 动画结束后元素宽度变为0，但占位仍然存在，如果需要完全移除占位，可以结合opacity属性做淡出效果
• 这种方案不会影响其他定位属性，兼容性也比较好，支持IE9及以上浏览器

方案二：结合left属性动态调整

如果不想使用transform，也可以通过同时调整left和width属性，让元素右边缘始终固定在right: 0的位置，实现从右向左收缩。

完整代码示例

.parent {
  position: relative;
  width: 500px;
  height: 200px;
  background-color: #f0f0f0;
}

.target {
  position: absolute;
  right: 0;
  top: 50px;
  /* 初始left为父容器宽度减去元素宽度，保证右边缘贴父容器右边缘 */
  left: 200px;
  width: 300px;
  height: 100px;
  background-color: #67c23a;
  /* 定义动画 */
  animation: shrinkWithLeft 2s ease forwards;
}

@keyframes shrinkWithLeft {
  from {
    left: 200px;
    width: 300px;
  }
  to {
    left: 500px;
    width: 0;
  }
}

方案说明

• 初始状态left = 父容器宽度 - 元素宽度，此时right: 0和left的设置会让元素右边缘固定
• 动画过程中，width减小的同时left同步增大，保证元素右边缘始终在right: 0的位置
• 这种方案需要提前知道父容器的宽度，动态场景下可能需要通过JS获取父容器宽度后再设置初始值

两种方案对比

如果是现代浏览器场景，优先推荐使用transform方案，性能和适配性都更优；如果需要兼容老版本浏览器或者需要元素完全移除占位，可以选择left+width方案。

CSS动画right定位宽度缩小从右向左动画transform修改时间：2026-07-23 13:30:38