When animation is done, how can we smooth out the transition

Question

I am able to achieve smooth in and out effect using transform and transition. I was experimenting with animation but could not achieve smooth out effect.

The first example below works. Note that when you hover, the card will move. And when you no longer hover, the cards to the right will close in slowly.

The second example is the one I'm trying to improve. How can you make the cards close in slowly when using animation? Thanks in advance.

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

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

Take a look at this link https://stackoverflow.com/questions/30144769/how-to-smoothly-revert-css-animation-to-its-current-state — Amoong, Jun 18 '21 at 23:44

score 0 · Answer 1 · answered Jun 18 '21 at 22:56

hi in the tile class you should add an animation like this:

.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;}

When animation is done, how can we smooth out the transition

1 Answers1