.chevron_container {
    position: relative;
    cursor: pointer;
    width: 24px;
    height: 24px;
    left: 50%;
    margin-top: 60px;
}
.chevron {
    position: absolute;
    width: 28px;
    height: 8px;
    opacity: 0;
    transform: scale3d(0.5, 0.5, 0.5);
    animation: move 3s ease-out infinite;
}

.chevron:first-child {
    animation: move 3s ease-out 1s infinite;
}

.chevron:nth-child(2) {
    animation: move 3s ease-out 2s infinite;
}

.chevron.up {
    animation: moveup 3s ease-out 2s infinite!important;
}

.chevron.up:first-child {
    animation: moveup 3s ease-out 1s infinite!important;
}

.chevron.up:nth-child(2) {
    animation: moveup 3s ease-out infinite!important;
}

.chevron.black {
}
.chevron.black:before,
.chevron.black:after {
    background: #000!important;
}

.chevron:before,
.chevron:after {
    content: ' ';
    position: absolute;
    top: 0;
    height: 100%;
    width: 51%;
    background: #fff;
}

.chevron:before {
    left: 0;
    transform: skew(0deg, 30deg);
}

.chevron:after {
    right: 0;
    width: 50%;
    transform: skew(0deg, -30deg);
}

.chevron.reverted:before {
    left: 0;
    transform: skew(0deg, -30deg);
}

.chevron.reverted:after {
    right: 0;
    width: 50%;
    transform: skew(0deg, 30deg);
}

@keyframes move {
    25% {
        opacity: 1;

    }
    33% {
        opacity: 1;
        transform: translateY(30px);
    }
    67% {
        opacity: 1;
        transform: translateY(40px);
    }
    100% {
        opacity: 0;
        transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
    }
}

@keyframes moveup {
    25% {
        opacity: 0;
        transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
    }
    33% {
        opacity: 1;
        transform: translateY(40px);
    }
    67% {
        opacity: 1;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
    }
}