.container {
    display: flex;
    position: absolute;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to right,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.8),
            rgba(255, 255, 255, 0.9),
            rgba(255, 255, 255, 0.95),
            rgba(255, 255, 255, 0.9),
            rgba(255, 255, 255, 0.8),
            rgba(255, 255, 255, 0));
}

.square {
    width: 60px;
    height: 60px;
    border: 5px solid;
    border-radius: 0.5em;
    margin: 20px;
    animation: jumpRotate 1600ms infinite cubic-bezier(0.22, 0.61, 0.36, 1);
}

.red {
    background-color: #e74c3c;
    border-color: #a9392c;
}

.yellow {
    background-color: #f1c40f;
    border-color: #ad8c0b;
    animation-delay: 400ms;
    -moz-animation-delay: 400ms;
    -webkit-animation-delay: 400ms;
}

.blue {
    background-color: #3498db;
    border-color: #21628d;
    animation-delay: 800ms;
    -moz-animation-delay: 800ms;
    -webkit-animation-delay: 800ms;
}

@keyframes jumpRotate {

    0%,
    20% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-40px) rotate(180deg);
    }

    80%,
    100% {
        transform: translateY(0) rotate(360deg);
    }
}