.animate-1s { animation-duration: 1s; }
.animate-2s { animation-duration: 2s; }
.animate-3s { animation-duration: 3s; }
.animate-4s { animation-duration: 4s; }
.animate-5s { animation-duration: 5s; }

.animate-delay-1s { animation-delay: 1s; }
.animate-delay-2s { animation-delay: 2s; }
.animate-delay-3s { animation-delay: 3s; }
.animate-delay-4s { animation-delay: 4s; }
.animate-delay-5s { animation-delay: 5s; }

.animate-spin {
    animation-name: spin;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-blender {
    animation-name: blender;
    animation-iteration-count: 1;
}

@keyframes blender {
    25% {
        -ms-transform: rotate(90deg); /* IE 9 */
        transform: rotate(90deg);
    }
    50% {
        -ms-transform: rotate(180deg); /* IE 9 */
        transform: rotate(180deg);
    }
    75% {
        -ms-transform: rotate(270deg); /* IE 9 */
        transform: rotate(270deg);
    }
    100% {
        -ms-transform: rotate(360deg); /* IE 9 */
        transform: rotate(360deg);
    }
}

.animate-fade {
    animation-name: fade;
    animation-fill-mode: forwards;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: fade;
}

@keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 100%;
        white-space: normal;
        overflow: visible;
    }
}

.animate-flicker {
    animation: blink 4s infinite alternate, buzz 1s infinite alternate;
}

@keyframes buzz {
    70% {
        opacity: 0.80;
    }
}

@keyframes blink {
    40% {
        opacity: 1;
    }
    42% {
        opacity: 0.8;
    }
    43% {
        opacity: 1;
    }
    45% {
        opacity: 0.2;
    }
    46% {
        opacity: 1;
    }
}

.animate-expand {
    animation-name: expand;
    animation-fill-mode: forwards;
    transform: rotateY(-90deg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: fade;
}

@keyframes expand {
from {
    transform: rotateY(-90deg);
}
to {
    transform: rotateY(0deg);
}
}

.animate-flyin-left {
    animation-name: flyin-left;
    animation-fill-mode: forwards;
    transform: translate(-200%, 0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: fade;
}

@keyframes flyin-left {
    from {
        transform: translate(-200%, 0);
    }
    to {
        transform: translate(0, 0);
    }
}

.animate-flyin-bottom {
    animation-name: flyin-bottom;
    animation-fill-mode: forwards;
    transform: translate(0, 200%);
    opacity: 0;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: fade;
}

@keyframes flyin-bottom {
    from {
        transform: translate(0, 200%);
        position: absolute;
        opacity: 0;
    }
    to {
        transform: translate(0, 0);
        position: relative;
        opacity: 100%;
    }
}