Webkit 动画仅将矩形 div 的右边缘向左移动

Question

考虑具有 100% 宽度和 100vh 高度的 div。我想将它缩小到 50% 宽度，为此只有它的右手边必须从 100% 到 50%。

我怎样才能做到这一点？

更新：

我的HTML（反应）：

<div className={classNames("div-one", { "half-width": this.state.showRegistration })}>
</div>

和css：

.div-one {

  background: url("../../../assets/images/manhattan-min.png") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  position: absolute;
  width: 100%;
  min-height: 500px;
  min-height: 100vh;

}

.div-one.half-width {
  width: 50%;
  -webkit-animation: right-to-left-div1 0.2s forwards;
  animation: right-to-left-div1 0.2s forwards;

}

@keyframes right-to-left-div1{
  from{left:10%}
  to{left:0%}
}

Answer 1

用另一个div包起来，把里面的div放在左边，然后变换宽度。

Answer 2

如果我理解问题，你可以将宽度设置为 50%

div {
  position: absolute;
  min-height: 500px;
  min-height: 100vh;
  width: 100%;
  background: green;
  -webkit-animation: right-to-left-div1 0.2s forwards;
  animation: right-to-left-div1 0.2s forwards;
}

@keyframes right-to-left-div1{
  to {
    width: 50%;
  }
}

<div></div>

Webkit 动画仅将矩形 div 的右边缘向左移动

Webkit animation move only right edge of a rectangular div to the left

css

webkit

sass