.dot {
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
}

.bounce-1 {
    animation-name: bounce-1;
    animation-timing-function: ease;
}

@keyframes bounce-1 {
    0% {
        transform: scale(1,1) translateY(0);
    }

    10% {
        transform: scale(1,1) translateY(-.20em);
    }

    30% {
        transform: scale(1,1) translateY(0);
    }

    50% {
        transform: scale(1,1) translateY(0);
    }

    57% {
        transform: scale(1,1) translateY(0);
    }

    64% {
        transform: scale(1,1) translateY(0);
    }

    100% {
        transform: scale(1,1) translateY(0);
    }
}

.bounce-2 {
    animation-name: bounce-2;
    animation-timing-function: ease;
}

@keyframes bounce-2 {
    0% {
        transform: scale(1,1) translateY(0);
    }

    10% {
        transform: scale(1,1) translateY(0);
    }

    30% {
        transform: scale(1,1) translateY(-.20em);
    }

    50% {
        transform: scale(1,1) translateY(0);
    }

    57% {
        transform: scale(1,1) translateY(0);
    }

    64% {
        transform: scale(1,1) translateY(0);
    }

    100% {
        transform: scale(1,1) translateY(0);
    }
}

.bounce-3 {
    animation-name: bounce-3;
    animation-timing-function: ease;
}

@keyframes bounce-3 {
    0% {
        transform: scale(1,1) translateY(0);
    }

    10% {
        transform: scale(1,1) translateY(0);
    }

    30% {
        transform: scale(1,1) translateY(0);
    }

    50% {
        transform: scale(1,1) translateY(-.20em);
    }

    57% {
        transform: scale(1,1) translateY(0);
    }

    64% {
        transform: scale(1,1) translateY(0);
    }

    100% {
        transform: scale(1,1) translateY(0);
    }
}