﻿@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -moz-transform: translateY(0);
        transform: translateY(0);
    }

    40% {
        -moz-transform: translateY(-30px);
        transform: translateY(-30px);
    }

    60% {
        -moz-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}

@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    40% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }

    60% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    40% {
        -moz-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }

    60% {
        -moz-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}


.bounce {
    -moz-animation: bounce 2s infinite;
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
}

/*delayed show, then bounce*/
.delayed-show {
    visibility:hidden;
}

@keyframes show-me-after-delay {
    from {
        visibility:hidden;
    }

    to {
        visibility:visible;
    }
}

.animation-element.in-view.bounce {
    -moz-animation: show-me-after-delay 1s 8s 1 forwards, bounce 2s infinite;
    -webkit-animation: show-me-after-delay 1s 8s 1 forwards, bounce 2s infinite;
    animation: show-me-after-delay 1s 8s 1 forwards, bounce 2s infinite;
}
