2017-04-13 89 views
0

考虑一个宽度为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%} 
} 
+1

你尝试过什么?如果是这样,发布相关的CSS和HTML – Morpheus

+0

@Morpheus我已经更新了我的问题 – Nitish

回答

1

如果我理解这个问题,你可以宽度动画到50%

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>

+0

完美!我想要这个。非常感谢! – Nitish

0

敷在另一个div内DIV位置向左,然后转换宽度。