Webkit 애니메이션은 왼쪽 사각형 div의 오른쪽 가장자리에만 이동합니다.

Question

너비가 100 %이고 높이가 100v 인 div를 고려하십시오. 50 % 너비로 줄이려면 오른쪽 가장자리 만 100 %에서 50 %로 줄여야합니다.

어떻게하면됩니까?

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

Answer 1

, 당신은 당신이 아무것도를 시도

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>

Answer 2

다른 사업부에 랩, 왼쪽으로 내부 DIV의 위치를 , 너비를 변환합니다. 내가 질문을 이해한다면