I have a function that, when the Start button is pressed, a cycle is called for 10 iterations, where it generates a number from 1 to 7, which is substituted in the switch, where functions should be called in turn on the object. First change css, then call animate and then change css again, but instead they change at the same time without waiting for the end of the previous function. Why is this happening? And how to fix it?

The function

$('input[Value="Start"]').click(function () {
    $(this).css("visibility", "hidden");
    for (let i = 0; i < 10; i++) {
        note = Math.floor(Math.random() * 7) + 1;
        console.log(note);
        switch (note) {
            case 1:
                $('.SightReading_content_show_imeage_note_C').css("visibility", "visible").animate({ 'left': '20%' }, 3000).css({ "visibility": "hidden", "left":"80%"});
                break;
            case 2:
                $('.SightReading_content_show_imeage_note_D').css("visibility", "visible").animate({ 'left': '20%' }, 3000).css({ "visibility": "hidden", "left": "80%" });
                break;
            case 3:
                $('.SightReading_content_show_imeage_note_E').css("visibility", "visible").animate({ 'left': '20%' }, 3000).css({ "visibility": "hidden", "left": "80%" });
                break;
            case 4:
                $('.SightReading_content_show_imeage_note_F').css("visibility", "visible").animate({ 'left': '20%' }, 3000).css({ "visibility": "hidden", "left": "80%" });
                break;
            case 5:
                $('.SightReading_content_show_imeage_note_G').css("visibility", "visible").animate({ 'left': '20%' }, 3000).css({ "visibility": "hidden", "left": "80%" });
                break;
            case 6:
                $('.SightReading_content_show_imeage_note_A').css("visibility", "visible").animate({ 'left': '20%' }, 3000).css({ "visibility": "hidden", "left": "80%" });
                break;
            case 7:
                $('.SightReading_content_show_imeage_note_B').css("visibility", "visible").animate({ 'left': '20%' }, 3000).css({ "visibility": "hidden", "left": "80%" });
                break;
        }
    }
   $(this).css("visibility", "visible");
});