如何在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-originis 50% 50%,您可以将其重置为100% 50%,第一个值100%是x-offset,第二个值50%是y-offset.

要使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>