Currently, I am in the process of designing an About page for my website. Within this layout, there is a main parent element named maindiv, which utilizes a flexbox to house two children: leftcont and rightcont. My goal is to implement an animation using margin-top specifically to affect the leftcont child element only.
However, upon attempting to create this animation, I have encountered the issue where the animation also affects its sibling (rightcont) div, which is not intended behavior.
Could somebody kindly assist me with resolving this dilemma? Below is the code snippet in question:
<!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>