Advertisements
I am creating an about page for my website. I have one parent element called maindiv, a flexbox with two children, one is leftcont and another is rightcont. I want to create an animation using margin-top to leftcont.
But when I do the same, the animation is being applied to its sibling(rightcont) div also which I do not want
Can you please help me with the same
Here is the code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.imganim {
margin-bottom: 10px;
border: 2px solid red;
transition: 2s;
}
.maindiv {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.leftcont {
width: 50%;
border: 2px solid red;
}
.rightcont {
width: 50%;
animation: none;
border: 2px solid black;
margin-top: 0 !important;
}
.marginanim {
animation: margin 2.4s infinite;
}
@keyframes margin {
0% {
margin-top: 0;
}
50% {
margin-top: 10px;
}
100% {
margin-top: 0;
}
}
</style>
</head>
<body>
<div class="maindiv">
<div class="leftcont marginanim">
<img src="https://solutionfest.netlify.app/static/media/vector8.5596c5d75a5f1c4454c0.jpg" alt="">
</div>
<div class="rightcont">
<h2>Aboutme</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, obcaecati similique? Eligendi sint,
laborum aspernatur, temporibus consequuntur ipsa officiis, praesentium distinctio necessitatibus sed
debitis eius facilis molestiae. Consectetur laboriosam veritatis quis perspiciatis ab quae sunt nam
itaque veniam mollitia obcaecati non minima molestias illo cum, ducimus soluta modi inventore
consequuntur.</p>
</div>
</div>
</body>
</html>
>Solution :
margin-top also changes the size of the parent, and this also affects the rightcont. If you use transform: translateY property the parent does not notice the movement and you get the effect you are looking for.
* {
margin: 0;
padding: 0;
}
.imganim {
margin-bottom: 10px;
border: 2px solid red;
transition: 2s;
}
.maindiv {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.leftcont {
width: 50%;
border: 2px solid red;
z-index:0;
}
.rightcont {
width: 50%;
animation: none;
border: 2px solid black;
margin-top: 0 !important;
z-index:1;
}
.marginanim {
animation: margin 2.4s infinite;
}
@keyframes margin {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(10px);
}
100% {
transform: translateY(0px);
}
}<div class="maindiv">
<div class="leftcont marginanim">
<img src="https://solutionfest.netlify.app/static/media/vector8.5596c5d75a5f1c4454c0.jpg" alt="">
</div>
<div class="rightcont">
<h2>Aboutme</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, obcaecati similique? Eligendi sint, laborum aspernatur, temporibus consequuntur ipsa officiis, praesentium distinctio necessitatibus sed debitis eius facilis molestiae. Consectetur laboriosam
veritatis quis perspiciatis ab quae sunt nam itaque veniam mollitia obcaecati non minima molestias illo cum, ducimus soluta modi inventore consequuntur.
</p>
</div>
</div>