In first-child of container, translateY property make element disappear but when it comes to last child it increases the size of page and stays on page. I want it to disappear and gives the transition effect on both the child.
body{
height: 100vh;
}
.container{
height: 100vh;
width: 100vw;
font-size: 2em;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.container > :first-child{
transform: translateY(-200px);
}
.container > :last-child{
transform: translateY(200px);
}<body>
<div class="container">
<p>Abc</p>
<p>Xyz</p>
<p>Abc</p>
</div>
</body>>Solution :
Just add overflow : hidden; style to the container class.
body{
height: 100vh;
}
.container{
height: 100vh;
width: 100vw;
font-size: 2em;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
overflow:hidden;
}
.container > :first-child{
transform: translateY(-200px);
}
.container > :last-child{
transform: translateY(200px);
}<body>
<div class="container">
<p>Abc</p>
<p>Xyz</p>
<p>Abc</p>
</div>
</body>