设定两个div的动画进行相对运动时,设置的动画有一方需要运动双倍的距离来抵消另一个div的接近。
<div class="rib2">
</div>
<div class="rib1"><img src="" alt=""></div>
<div class="rib3"><img src="" alt=""></div>
.ria1 .rib1{
height: 60px;
width: 50px;
z-index: 2;
position: relative;
float: left;
top: -160px;
left: -50px;
overflow: hidden;
background-color: rgb(189, 189, 189);
}
.ria1 .rib3{
height: 60px;
width: 50px;
position: relative;
float: left;
left:350px;
top: -160px;
overflow: hidden;
background-color: rgb(170, 170, 170);
}
.ria1 .rib2:hover ~ .rib1{
animation: img33 1s linear ;
animation-fill-mode: forwards;
}
@keyframes img33{
0%{
margin-left: 0;
}
50%{
margin-left: 25px;
}
100%{