.ribbons {
    background: #fff;
    height: 450px;
    overflow: hidden;
    position: relative;
}
.ribbons .ribbon-holder {
    position: absolute;
    height: 450px;
    width: 100%;
    left: 0px;
    top: 0px;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
.ribbons .ribbon-holder .ribbon {
    position: absolute;
    width: 38px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    font-size: 23px;
    line-height: 30px;
    font-family: 'Lineto Brown', sans-serif;
}
.ribbons .ribbon-holder .ribbon .bull {
    font-size: 10px;
}
@-webkit-keyframes rotation1 {
    from {
        -webkit-transform: rotate(100deg);
        transform: rotate(100deg);
    }
    to {
        -webkit-transform: rotate(459deg);
        transform: rotate(459deg);
    }
}
@keyframes rotation1 {
    from {
        -webkit-transform: rotate(100deg);
        transform: rotate(100deg);
    }
    to {
        -webkit-transform: rotate(459deg);
        transform: rotate(459deg);
    }
}
@-webkit-keyframes rotation2 {
    from {
        -webkit-transform: rotate(293deg);
        transform: rotate(293deg);
    }
    to {
        -webkit-transform: rotate(652deg);
        transform: rotate(652deg);
    }
}
@keyframes rotation2 {
    from {
        -webkit-transform: rotate(293deg);
        transform: rotate(293deg);
    }
    to {
        -webkit-transform: rotate(652deg);
        transform: rotate(652deg);
    }
}
@-webkit-keyframes rotation3 {
    from {
        -webkit-transform: rotate(269deg);
        transform: rotate(269deg);
    }
    to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@keyframes rotation3 {
    from {
        -webkit-transform: rotate(269deg);
        transform: rotate(269deg);
    }
    to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@-webkit-keyframes rotation4 {
    from {
        -webkit-transform: rotate(280deg);
        transform: rotate(280deg);
    }
    to {
        -webkit-transform: rotate(639deg);
        transform: rotate(639deg);
    }
}
@keyframes rotation4 {
    from {
        -webkit-transform: rotate(280deg);
        transform: rotate(280deg);
    }
    to {
        -webkit-transform: rotate(639deg);
        transform: rotate(639deg);
    }
}
@-webkit-keyframes rotation5 {
    from {
        -webkit-transform: rotate(429deg);
        transform: rotate(429deg);
    }
    to {
        -webkit-transform: rotate(70deg);
        transform: rotate(70deg);
    }
}
@keyframes rotation5 {
    from {
        -webkit-transform: rotate(429deg);
        transform: rotate(429deg);
    }
    to {
        -webkit-transform: rotate(70deg);
        transform: rotate(70deg);
    }
}

.ribbons .ribbon-holder:nth-child(1) .ribbon {
    -webkit-animation: rotation1 1700s infinite linear;
    animation: rotation1 1700s infinite linear;
    left: 50%;
    bottom: -200%;
}
.ribbons .ribbon-holder:nth-child(2) .ribbon {
    -webkit-animation: rotation2 1800s infinite linear;
    animation: rotation2 1800s infinite linear;
    left: 51%;
    bottom: -180%;
}
.ribbons .ribbon-holder:nth-child(3) .ribbon {
    -webkit-animation: rotation3 1900s infinite linear;
    animation: rotation3 1900s infinite linear;
    left: 51%;
    bottom: -180%;
}
.ribbons .ribbon-holder:nth-child(4) .ribbon {
    -webkit-animation: rotation4 2000s infinite linear;
    animation: rotation4 2000s infinite linear;
    left: 51%;
    bottom: -150%;
}
.ribbons .ribbon-holder:nth-child(5) .ribbon {
    -webkit-animation: rotation5 1600s infinite linear;
    animation: rotation5 1600s infinite linear;
    left: 51%;
    bottom: -180%;
}