margin-top 也适用于兄弟元素

Question

我正在为我的网站创建一个关于页面。我有一个名为 maindiv 的父元素，一个有两个子元素的 flexbox，一个是 leftcont，另一个是 rightcont。我想使用 margin-top to leftcont 创建一个动画。但是当我这样做时，动画被应用到它的兄弟（rightcont）div 也是我不想要的

你能帮我做同样的事吗这是代码：

<!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>

Answer 1

margin-top 也会改变 parent 的大小，这也会影响 rightcont。如果你使用 transform: translateY 属性 parent 不会注意到移动，你会得到你想要的效果。

* {
  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>

margin-top 也适用于兄弟元素

margin-top applies to sibling element also

html

css

animation

margin

css-animations