.motion1{
        animation: wholeBar 2s ease-out 0s 1 forwards normal;
    }
    
    @keyframes wholeBar{
        82%{
            left: 4%;
        }
        86%{
            left: 5%;
        }
        90%{
            left: 4%;
        }
        94%{
            left: 5%;
        }
        100%{
            left: 4%;
        }
    }
    
    .motion2{
        animation: firstBar 2s linear 3s infinite forwards normal;
    }
    .motion2a{
        animation: firstBar 2s linear 4.2s infinite forwards normal;
    }
    
    @keyframes firstBar{
        50%{
            left: 30%;
        }
    }
    
    .motion3{
        animation: rotaBar 2.8s linear 4.5s infinite;
    }
    @keyframes rotaBar{
        80%{
            border-bottom-right-radius: 1.5rem;
            border-top-left-radius: 1.5rem;
            transform: rotateZ(360deg);
        }
    }
    .motion4{
        animation: reveal 1s linear 5s 1 forwards normal;
    }
    @keyframes reveal{
        100%{
            height: 0%;
        }
    }
    .ball{
        position: absolute;
        top: -15%;
        left: 0%;
        width: 15%;
        height: 15%;
        background: linear-gradient(green,black);
        border-radius: 50%;
        opacity: 0;
    }
    .ball1{
        animation: ballmotion1 1.5s linear 5s 1 forwards;
    }
    
    @keyframes ballmotion1{
        9%{
            border-bottom-left-radius: 50%;
            border-bottom-right-radius: 50%;
            transform: rotateZ(0deg);
            opacity: 1;
        }
        10%{
            top: 16%;
            left: -5%;
        }
        20%{
            top: 5%;
            left: 5%;
        }
        30%{
            top: 0%;
            left: 15%;
        }
        40%{
            top: -1%;
            left: 25%;
        }
        65%{
            top: 16%;
            left: 45%;
            transform: rotateZ(400deg);
        }
        80%{
            top: 16%;
            left: 55%;
        }
        90%{
            top: 16%;
            left: 60%;
        }
        100%{
            top: 16%;
            left: 65%;
            transform: rotateZ(720deg);
            opacity: 1;
        }
    }
    
    .ball2{
        opacity: 1;
        animation: ballmotion2 0.5s linear 0s 1 forwards normal;
    }
    
    @keyframes ballmotion2{
        0%{
            top: 15%;
            left: 65%;
            transform: rotateZ(0deg);
        }
        
        100%{
            top: 45%;
            left: 70%;
            transform: rotateZ(360deg);
        }
    }
    
    .ball3{
        opacity: 1;
        animation: ballmotion3 0.4s linear 0s 1 forwards normal;
    }
    
    
    @keyframes ballmotion3{
        0%{
            top: 45%;
            left: 70%;
        }
        
        100%{
            top: 50%;
            left: 110%;
            transform: rotateZ(60deg);
        }
    }
    
    .ball4{
        opacity: 1;
        animation: ballmotion4 0.5s linear 0s 1 forwards normal;
    }
    
    @keyframes ballmotion4{
        0%{
            top: 50%;
            left: 112%;
            transform: rotateZ(0deg);
        }
        90%{
            top: 100%;
            left: 70%;
            transform: rotateZ(-90deg);
        }
        100%{
            top: 103%;
            left: 70%;
            transform: rotateZ(-180deg);
        }
    }
    
    .ball5{
        opacity: 1;
        animation: ballmotion5 1s linear 0s 1 forwards normal;
    }
    
    @keyframes ballmotion5{
        0%{
            top: 104%;
            left: 74%;
            transform: rotateZ(-220deg);
        }
        50%{
            top: 100%;
            left: 72%;
            transform: rotateZ(-420deg);
        }
        100%{
            top: 122%;
            left: 72%;
            transform: rotateZ(-520deg);
            z-index: 3;
        }
    }
    
    .ball6{
        opacity: 1;
        animation: ballmotion6 1s linear 0s 1 forwards normal;
    }
    @keyframes ballmotion6{
        0%{
            top: 124%;
            left: 72%;
            transform: rotateZ(0deg);
            z-index: 3;
        }
        50%{
            top: 120%;
            left: 67%;
            transform: rotateZ(-360deg);
        }
        100%{
            top: 161%;
            left: 67%;
            transform: rotateZ(-910deg);
            z-index: 3;
        }
    }
    
    .ball7{
        opacity: 1;
        animation: ballmotion7 0.7s linear 0s 1 forwards normal;
    }
    @keyframes ballmotion7{
        0%{
            top: 161%;
            left: 67%;
            transform: rotateZ(-180deg);
            z-index: 3;
        }
        50%{
            top: 170%;
            left: 74%;
            transform: rotateZ(0deg);
        }
        100%{
            top: 183%;
            left: 74%;
            transform: rotateZ(-360deg);
            z-index: 3;
        }
    }
    .ball8{
        opacity: 1;
        animation: ballmotion8 1.8s linear 0s 1 forwards normal;
    }
    @keyframes ballmotion8{
        0%{
            top: 183%;
            left: 74%;
            transform: rotateZ(0deg);
            z-index: 3;
        }
        50%{
            top: 181%;
            left: 54%;
            transform: rotateZ(-620deg);
        }
        70%{
            top: 213%;
            left: 40%;
            transform: rotateZ(-1080deg);
            z-index: 3;
        }
        99%{
            z-index: 3;
        }
        100%{
            top: 213%;
            left: 20%;
            transform: rotateZ(-1280deg);
        }
    }

    /*end ball motion*/


/*end animate*/