动画完成后，如何平滑过渡

Question

我可以使用transform 和transition 实现平滑进出效果。我正在尝试animation，但无法达到平滑效果。

下面的第一个例子有效。请注意，当您悬停时，卡片会移动。当您不再悬停时，右侧的卡片会慢慢靠近。

第二个例子是我想要改进的例子。使用动画时如何让卡片慢慢靠近？提前致谢。

示例 1

.container {
    display: flex;
    margin-top: 100px;
    justify-content: center;
}

.card {
    height: 200px;
    width: 200px;
    background-color: antiquewhite;
    border: 1px solid black;
    border-radius: 15px;
    box-shadow: 1px 1px 15px 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 1s;
}

.card:not(:first-child) {
    margin-left: -150px;
}

.card:hover {
    transform: translateY(-20px);
}

.card:not(:last-child):hover ~ .card {
    transform: translateX(170px);
}

<div class="container">
    <div class="card">
        CARD
    </div>
    <div class="card">
        CARD
    </div>
    <div class="card">
        CARD
    </div>
    <div class="card">
        CARD
    </div>
    <div class="card">
        CARD
    </div>
 </div>

示例 2

.container2 {
    display: flex;
    justify-content: center;
    margin-top: 200px;
}

.tile {
    height: 200px;
    width: 200px;
    background-color: antiquewhite;
    border: 1px solid black;
    border-radius: 15px;
    box-shadow: 1px 1px 15px 1px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tile:not(:first-child) {
    margin-left: -150px;
}

.tile:not(:last-child):hover ~ .tile {
    animation: slide 0.8s linear forwards;
}
@keyframes slide {
    0% { 
        transform: translateX(0px); 
    }
    100% { 
        transform: translateX(170px); 
    }
}

.tile:hover {
    animation: float 0.8s forwards;
}
@keyframes float {
    0% { 
        transform: translateY(0px); 
    }
    100% { 
        transform: translateY(-15px); 
    }
}

<div class="container container2">
    <div class="tile">
        CARD
    </div>
    <div class="tile">
        CARD
    </div>
    <div class="tile">
        CARD
    </div>
    <div class="tile">
        CARD
    </div>
    <div class="tile">
        CARD
    </div>
</div>

Answer 1

你应该在 tile 类中添加这样的动画：

.tile {
height: 200px;
width: 200px;
background-color: antiquewhite;
border: 1px solid black;
border-radius: 15px;
box-shadow: 1px 1px 15px 1px;
display: flex;
justify-content: center;
align-items: center;
animation-duration: 0.8s;}