高さ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%}
}
50%に幅をアニメーション化することができますか?もしそうなら、関連するCSSとHTMLを投稿してください。 – Morpheus
@Morpheus私の質問を更新しました – Nitish