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

Question

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

我怎样才能做到这一点？

更新:

我的 HTML(它是 react ):

<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

如果我理解这个问题，你可以将宽度设置为 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>