CSS animation “stuck”

Question

I made video for show you exact problem (up). I've got an animation of cards. 1st animation is when you load page, these cards are fly in automatically.

.card{
animation: startup .5s ease-in-out .2s 1 forwards;
}

@keyframes startup {
from {top: -150px; opacity: 0;}
to {top: 0px; opacity: 1;}
}

Next I have the animation, when you click on pink arrow on card, new window will fly from left and cards will hide with a little effect. And when you want to go back you just press pink arrow on new big card.

    $(".icon_card1").click(function () {
        $(".card1bg").css('opacity', '1');
    });
    $(".icon_card1").click(function () {
        $(".card1_content").css('margin-left', '0%');
    });
    $(".card1_content_arrow").click(function () {
        $(".card1_content").css('margin-left', '-45%');
    });
    $(".card1_content_arrow").click(function () {
        $(".card1bg").css('opacity', '0');
    });
    $(".icon_card1").on('click', function() {
        $(".card1").toggleClass('animace1');
    });
    $(".card1_content_arrow").on('click', function() {
        $(".card1").toggleClass('animace1back');
    });

CSS part:

.card1.animace1{
animation: myanimation1 1s ease-in-out 0s 1 forwards;
}
.card1.animace1back{
animation: myanimation1back 1s ease-in-out 0s 1 forwards;
}
@keyframes myanimation1 {
0%   { margin-top: 0px; opacity: 1; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}
30% { margin-top: -10px; opacity: 1; box-shadow: 0 20px 40px rgba(0,0,0,0.29), 0 12px 12px rgba(0,0,0,0.33);}
100% { margin-top: 300px; opacity: 0;}
}
@keyframes myanimation1back {
0%   { margin-top: 300px; opacity: 0; }
100% { margin-top: 0; opacity: 1; }
}

This is working fine. But only for first time being on refreshed page. When you click on card's arrow first time, everything is good. But when you close that card and you want to open same card again, it won't play animation of dissolve cards. When you click on that big left card's arrow, it will somehow "refresh" whole animation (like when you reload the page) and it is again working. But then again and again. Thanks for any help!

Answer 1

Since you are using toggle it goes like this:

Click 1: .animace1 added

Click 2: .animace1 removed

Click 3: .animace1 added

The second click actually removed the class. Change your toggleClass(x) to removeClass('x').addClass('x').