@keyframes rotating {
    0% { 
        background-position: 0 190px;
    }

    100% { 
        background-position: 760px 190px;
    }
}

@keyframes before-avers {
    0% { 
        background-position: 0px 190px;
    }

    33% { 
        background-position: 95px 190px;
    }

    66% { 
        background-position: 570px 0;
    }

    100% { 
        background-position: 665px 0;
    }
}


@keyframes falling-avers {
    0% { 
        background-position: 95px 0;
    }

    100% { 
        background-position: 760px 0;
    }
}


@keyframes before-revers {
    0% { 
        background-position: 0px 190px;
    }

    33% { 
        background-position: 95px 190px;
    }

    66% { 
        background-position: 570px 95px;
    }

    100% { 
        background-position: 665px 95px;
    }
}

@keyframes falling-revers {
    0% { 
        background-position: 95px 95px;
    }

    100% { 
        background-position: 760px 95px;
    }
}

.coins {
    display: flex;
    width: 285px;
    height: 190px;
    flex-wrap: wrap;
}

.coin {
    background-image: url('../i_zin/m/coins-sprite.webp');
    width: 95px;
    height: 95px;
    opacity: 0;
    transition: opacity 0.3s;
}

.fall-avers {
    background-position: 0 0;
    opacity: 1;
    animation: 
        rotating 0.15s steps(8) 0s 4, 
        rotating 0.3s steps(8) 0.6s 4, 
        before-avers 0.15s step-end 1.8s 1, 
        falling-avers 0.5s steps(7) 1.95s 4;
}

.fall-revers {
    opacity: 1;
    background-position: 0 95px;
    animation: 
        rotating 0.15s steps(8) 0s 4, 
        rotating 0.3s steps(8) 0.6s 4, 
        before-revers 0.15s step-end 1.8s 1, 
        falling-revers 0.5s steps(7) 1.95s 4;
}