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

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

我怎样才能做到这一点

更新：

我的HTML是：

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

---

将其包裹在另一个div中，将内部div置于左侧，然后变换宽度

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

div{ 位置：绝对位置； 最小高度：500px； 最小高度：100vh； 宽度：100%； 背景：绿色； -webkit动画：从右向左0.2s向前； 动画：从右向左0.2秒前进； } @从右到左的关键帧div1{ 到{ 宽度：50%； } }

---

你试过什么吗？如果是，发布相关css和html@Morpheus我已经更新了我的问题！我就是想要这个。非常感谢你！

.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%}
}