我正在创建一个关于我网站的页面。我有一个父元素叫做maindiv，一个有两个子元素的伸缩体，一个是leftcont，另一个是rightcont。我想创建一个动画使用margin-top到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>
margin-top也改变了父元素的大小，这也影响了rightcont。如果你使用transform: translateY属性，父属性不会注意到移动，你会得到你想要的效果。
* {
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>