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

在CSS中，如果你想实现一个元素在 right: 0 定位下从右向左的宽度缩小动画，可以使用 @keyframes 和 transform 或者 width 属性来实现。以下是两种常见的实现方式：

方法1：使用 transform: scaleX()

这种方法通过 transform: scaleX() 来缩放元素的宽度，从而实现从右向左的缩小效果。

<div class="box"></div>

.box {
  position: absolute;
  right: 0;
  width: 200px;
  height: 100px;
  background-color: #3498db;
  animation: shrinkRightToLeft 2s forwards;
}

@keyframes shrinkRightToLeft {
  0% {
    transform: scaleX(1);
    transform-origin: right;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}

方法2：使用 width 属性

这种方法通过直接改变 width 属性来实现从右向左的缩小效果。

<div class="box"></div>

.box {
  position: absolute;
  right: 0;
  width: 200px;
  height: 100px;
  background-color: #3498db;
  animation: shrinkRightToLeft 2s forwards;
}

@keyframes shrinkRightToLeft {
  0% {
    width: 200px;
  }
  100% {
    width: 0;
  }
}

解释：

• transform: scaleX()：通过缩放元素的宽度来实现动画效果。transform-origin: right 确保缩放是从右侧开始的。
• width 属性：直接改变元素的宽度，从初始宽度缩小到0。

注意事项：

• 如果你希望动画结束后保持最终状态，可以使用 animation-fill-mode: forwards。
• 如果你需要支持旧版浏览器，可能需要考虑使用 @-webkit-keyframes 等前缀。

这两种方法都可以实现从右向左的宽度缩小动画，选择哪种方法取决于你的具体需求和浏览器兼容性要求。