margin-top applies to sibling element also-CodePudding

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 >
        <div >
            <img src="https://solutionfest.netlify.app/static/media/vector8.5596c5d75a5f1c4454c0.jpg" alt="">
        </div>
        <div >
            <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>

CodePudding user response：

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 >
  <div >
    <img src="https://solutionfest.netlify.app/static/media/vector8.5596c5d75a5f1c4454c0.jpg" alt="">
  </div>
  <div >
    <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>