Issue
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>
Answered By - Baro
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.