动画完成后,JQuery动画效果'弹跳'？

function createBounceAnimation(element) {
    $(element).animate({
        top: '200px',
        left: '200px'
    }, 1000);
}

function setAnimationDuration(element, duration) {
    $(element).animate({
        top: '200px',
        left: '200px'
    }, {
        duration: duration,
        delay: 500,
        complete: function() {
            $(this).animate({
                top: '0px',
                left: '0px'
            }, {
                duration: duration,
                complete: function() {
                    $(this).css('position', 'static');
                }
            });
        }
    });
}

createBounceAnimation('#element');

#element {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ff0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    animation: bounceAnimation 3s ease-in-out infinite;
    z-index: 0;
}

@keyframes bounceAnimation {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}