考虑一个宽度为100%,高度为100vh的div。我想把它缩小到50%的宽度,只有它的右手边缘必须从100%到50%。Webkit动画仅向左移动矩形div的右边缘
我该如何做到这一点?
UPDATE:
我的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%}
}
你尝试过什么?如果是这样,发布相关的CSS和HTML – Morpheus
@Morpheus我已经更新了我的问题 – Nitish