div相对运动动画细节

设定两个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%{