#ball {
    position: absolute;
    top: 25px;
    margin-left: -138px;
    z-index: 11;
    cursor: pointer;
    -webkit-animation: jump 1s infinite;
    -moz-animation: jump 1s infinite;
    -o-animation: jump 1s infinite;
    -ms-animation: jump 1s infinite;
    animation: jump 1s infinite
}



@-webkit-keyframes jump {
    0% {
        left: 0;
        -webkit-animation-timing-function: ease-in
    }
    50% {
        left: 30px;

        -webkit-animation-timing-function: ease-out
    }
    55% {
        left: 30px;

        -webkit-animation-timing-function: ease-in
    }
    65% {
        left: 30px;

        -webkit-animation-timing-function: ease-out
    }
    95% {
        left: 0;
        -webkit-animation-timing-function: ease-in
    }
    100% {
        left: 0;
        -webkit-animation-timing-function: ease-in
    }
}

@-moz-keyframes jump {
    0% {
        left: 0;
        -moz-animation-timing-function: ease-in
    }
    50% {
        left: 30px;

        -moz-animation-timing-function: ease-out
    }
    55% {
        left: 30px;

        -moz-animation-timing-function: ease-in
    }
    65% {
        left: 30px;

        -moz-animation-timing-function: ease-out
    }
    95% {
        left: 0;
        -moz-animation-timing-function: ease-in
    }
    100% {
        left: 0;
        -moz-animation-timing-function: ease-in
    }
}

@-o-keyframes jump {
    0% {
        left: 0;
        -o-animation-timing-function: ease-in
    }
    50% {
        left: 30px;

        -o-animation-timing-function: ease-out
    }
    55% {
        left: 30px;

        -o-animation-timing-function: ease-in
    }
    65% {
        left: 30px;

        -o-animation-timing-function: ease-out
    }
    95% {
        left: 0;
        -o-animation-timing-function: ease-in
    }
    100% {
        left: 0;
        -o-animation-timing-function: ease-in
    }
}

@-ms-keyframes jump {
    0% {
        left: 0;
        -ms-animation-timing-function: ease-in
    }
    50% {
        left: 30px;

        -ms-animation-timing-function: ease-out
    }
    55% {
        left: 30px;
        -ms-animation-timing-function: ease-in
    }
    65% {
        left: 30px;
        -ms-animation-timing-function: ease-out
    }
    95% {
        left: 0;
        -ms-animation-timing-function: ease-in
    }
    100% {
        left: 0;
        -ms-animation-timing-function: ease-in
    }
}

@keyframes jump {
    0% {
        left: 0;
        animation-timing-function: ease-in
    }
    50% {
        left: 30px;
        animation-timing-function: ease-out
    }
    55% {
        left: 30px;
        animation-timing-function: ease-in
    }
    65% {
        left: 30px;

        animation-timing-function: ease-out
    }
    95% {
        left: 0;
        animation-timing-function: ease-in
    }
    100% {
        left: 0;
        animation-timing-function: ease-in
    }
}

@-webkit-keyframes shrink {
    0% {
        right: 0;
        margin-left: -30px;
        -webkit-animation-timing-function: ease-in
    }
    50% {
        right: 30px;
        margin-left: -30px;
        -webkit-animation-timing-function: ease-out
    }
    100% {
        right: 0;
        margin-left: -30px;
        -webkit-animation-timing-function: ease-in
    }
}

@-moz-keyframes shrink {
    0% {
        right: 0;
        margin-left: -30px;
        -moz-animation-timing-function: ease-in
    }
    50% {
        right: 30px;
        margin-left: -30px;
        -moz-animation-timing-function: ease-out
    }
    100% {
        right: 0;
        margin-left: -30px;
        -moz-animation-timing-function: ease-in
    }
}

@-o-keyframes shrink {
    0% {
        right: 0;
        margin-left: -30px;
        -o-animation-timing-function: ease-in
    }
    50% {
        right: 30px;
        margin-left: -30px;
        -o-animation-timing-function: ease-out
    }
    100% {
        right: 0;
        margin-left: -30px;
        -o-animation-timing-function: ease-in
    }
}

@-ms-keyframes shrink {
    0% {
        right: 0;
        margin-left: -30px;
        -ms-animation-timing-function: ease-in
    }
    50% {
        right: 30px;
        margin-left: -30px;
        -ms-animation-timing-function: ease-out
    }
    100% {
        right: 0;
        margin-left: -30px;
        -ms-animation-timing-function: ease-in
    }
}

@keyframes shrink {
    0% {
        right: 0;
        margin-left: -30px;
        animation-timing-function: ease-in
    }
    50% {
        right: 30px;
        margin-left: -30px;
        animation-timing-function: ease-out
    }
    100% {
        right: 0;
        margin-left: -30px;
        animation-timing-function: ease-in
    }
}