html - 如何在 CSS 中从右向左缩放？

Question

我正在尝试以动画方式缩放 div 元素。但是动画从中心开始并传播。有没有办法让动画从右开始向左展开？

.graybox {
  float: right;
  background-color: gray;
  height: 100px;
  width: 400px;
  line-height: 100px;
  -webkit-animation: main 250ms;
  -moz-animation: main 250ms;
  -ms-animation: main 250ms;
  animation: main 250ms;
}

@-moz-keyframes main {
  0% {
    -moz-transform: scaleX(0);
  }
  100% {
    -moz-transform: scaleX(1);
  }
}

Answer 1

默认 transform-origin是 50% 50%，您可以将其重置为 100% 50%，第一个值 100% 是 x 偏移量，第二个值值 50% 是 y 偏移量。

要使 div 的宽度和高度都能缩放，只需将 scaleX 更改为 scale。

您还需要设置正确的@keyframes 语法，-moz 前缀仅适用于Firefox 等Mozilla 浏览器。我建议使用 autoprefixer用于添加流行的前缀。

.graybox {
  float: right;
  background-color: gray;
  width: 100%;
  height: 100px;
  line-height: 100px;
  animation: main 3s;
  transform-origin: 100% 50%;
}

@keyframes main {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

<div class="graybox"></div>