考慮一個寬度爲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