有没有办法问用户，球有多少次反弹并为其制作动画？

Question

最近我在做CSS3动画实验。我成功地使用关键帧进行球弹跳。但有没有办法获得用户输入，并根据输入，球反弹很长时间？

比如说，我们需要询问用户，球有多长时间动画。用户说“5”，现在球必须动画5次？

这里是snippit

body {
            background-color: black;
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        #container {
            position: absolute;
            left: 50%;
            width: 500px;
            height: 300px;
        }

        #ball {
            z-index:3;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
            margin-left: -50px;
            background-color: #e65454;
            border-radius: 55px;
            -webkit-animation: bounce 2s 1 forwards;
            animation: bounce 2s 1 forwards;
            -webkit-animation-duration: 6s;
                    animation-duration: 6s;
        }
        
        @-webkit-keyframes bounce {
            0% {
                top: 0;
                -webkit-animation-timing-function: ease-in;
            }
            20% {
                top: 190px;
                -webkit-animation-timing-function: ease-out;
            }
            30% {
                top: 50px;
                -webkit-animation-timing-function: ease-in;
            }
            50% {
                top: 190px;
                -webkit-animation-timing-function: ease-out;
            }
            60% {
                top: 100px;
                -webkit-animation-timing-function: ease-in;
            }
            80% {
                top: 190px;
                -webkit-animation-timing-function: ease-out;
            }
            90% {
                top: 150px;
                -webkit-animation-timing-function: ease-in;
            }
            100% {
                top: 190px;
                -webkit-animation-timing-function: ease-out;
            }
        }

        @keyframes bounce {
            0% {
                top: 0;
                -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
            }
            20% {
                top: 190px;
                -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
            }
            30% {
                top: 50px;
                -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
            }
            50% {
                top: 190px;
                -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
            }
            60% {
                top: 100px;
                -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
            }
            80% {
                top: 190px;
                -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
            }
            90% {
                top: 150px;
                -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
            }
            100% {
                top: 190px;
                -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
            }
        }

        #shadow {
            position: absolute;
            height: 5px;
            width: 100px;
            background: rgba(255, 255, 255, .5);
            bottom: 1.5%;
            left: 0;
            box-shadow: 0px 0px 8px 2px rgba(255, 255, 255, .5);
            -webkit-animation: shadow 2s 1 forwards;
            animation: shadow 2s 1 forwards;
            -webkit-animation-duration: 6s;
                    animation-duration: 6s;
        }

        @-webkit-keyframes shadow {
            0% {
                width: 10px;
                -webkit-border-radius: 10px/5px;
                margin-left: -5px;
                -webkit-animation-timing-function: ease-in;
            }
            20% {
                width: 100px;
                -webkit-border-radius: 100px/5px;
                margin-left: -50px;
                -webkit-animation-timing-function: ease-out;
            }
            30% {
                width: 30px;
                -webkit-border-radius: 30px/5px;
                margin-left: -15px;
                -webkit-animation-timing-function: ease-in;
            }
            50% {
                width: 100px;
                -webkit-border-radius: 100px/5px;
                margin-left: -50px;
                -webkit-animation-timing-function: ease-out;
            }
            60% {
                width: 58px;
                -webkit-border-radius: 58px/5px;
                margin-left: -29px;
                -webkit-animation-timing-function: ease-in;
            }
            80% {
                width: 100px;
                -webkit-border-radius: 100px/5px;
                margin-left: -50px;
                -webkit-animation-timing-function: ease-out;
            }
            90% {
                width: 80px;
                -webkit-border-radius: 80px/5px;
                margin-left: -40px;
                -webkit-animation-timing-function: ease-in;
            }
            100% {
                width: 100px;
                -webkit-border-radius: 100px/5px;
                margin-left: -50px;
                -webkit-animation-timing-function: ease-out;
            }
        }

        @keyframes shadow {
            0% {
                width: 10px;
                border-radius: 10px/5px;
                margin-left: -5px;
                -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
            }
            20% {
                width: 100px;
                border-radius: 100px/5px;
                margin-left: -50px;
                -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
            }
            30% {
                width: 30px;
                border-radius: 30px/5px;
                margin-left: -15px;
                -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
            }
            50% {
                width: 100px;
                border-radius: 100px/5px;
                margin-left: -50px;
                -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
            }
            60% {
                width: 58px;
                border-radius: 58px/5px;
                margin-left: -29px;
                -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
            }
            80% {
                width: 100px;
                border-radius: 100px/5px;
                margin-left: -50px;
                -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
            }
            90% {
                width: 80px;
                border-radius: 80px/5px;
                margin-left: -40px;
                -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
            }
            100% {
                width: 100px;
                border-radius: 100px/5px;
                margin-left: -50px;
                -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
            }
        }

<div id="container">
        <div id="ball"></div>
        <div id="shadow"></div>
    </div>

我看到很少有关于使用jquery函数进行相同球弹跳的教程。那么有没有办法用jquery来实现这个目标？