[class*="animate-"] {
    opacity: 0;
}

[class*="trigger-"] {
    position: relative;
    -webkit-animation: 500ms ease-out forwards;
    -moz-animation: 500ms ease-out forwards;
    -o-animation: 500ms ease-out forwards;
    animation: 500ms ease-out forwards;
}

.trigger-top {
    -webkit-animation-name: animatetop;
    -moz-animation-name: animatetop;
    -o-animation-name: animatetop;
    animation-name: animatetop;
}

.trigger-bottom {
    -webkit-animation-name: animatebottom;
    -moz-animation-name: animatebottom;
    -o-animation-name: animatebottom;
    animation-name: animatebottom;
}

.trigger-left {
    -webkit-animation-name: animateleft;
    -moz-animation-name: animateleft;
    -o-animation-name: animateleft;
    animation-name: animateleft;
}

.trigger-right {
    -webkit-animation-name: animateright;
    -moz-animation-name: animateright;
    -o-animation-name: animateright;
    animation-name: animateright;
}

.trigger-fade {
    -webkit-animation-name: animatefade;
    -moz-animation-name: animatefade;
    -o-animation-name: animatefade;
    animation-name: animatefade;
}

.trigger-zoom {
    -webkit-animation-name: animatezoom;
    -moz-animation-name: animatezoom;
    -o-animation-name: animatezoom;
    animation-name: animatezoom;
}

@-webkit-keyframes animatetop {
    from {
        top: -300px;
        opacity: 0;
    }
    to {
        top: 0;
        opacity: 1;
    }
}

@-moz-keyframes animatetop {
    from {
        top: -300px;
        opacity: 0;
    }
    to {
        top: 0;
        opacity: 1;
    }
}

@-o-keyframes animatetop {
    from {
        top: -300px;
        opacity: 0;
    }
    to {
        top: 0;
        opacity: 1;
    }
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0;
    }
    to {
        top: 0;
        opacity: 1;
    }
}

@-webkit-keyframes animatebottom {
    from {
        bottom: -300px;
        opacity: 0;
    }
    to {
        bottom: 0;
        opacity: 1;
    }
}

@-moz-keyframes animatebottom {
    from {
        bottom: -300px;
        opacity: 0;
    }
    to {
        bottom: 0;
        opacity: 1;
    }
}

@-o-keyframes animatebottom {
    from {
        bottom: -300px;
        opacity: 0;
    }
    to {
        bottom: 0;
        opacity: 1;
    }
}

@keyframes animatebottom {
    from {
        bottom: -300px;
        opacity: 0;
    }
    to {
        bottom: 0;
        opacity: 1;
    }
}

@-moz-keyframes animateleft {
    from {
        left: -300px;
        opacity: 0;
    }
    to {
        left: 0;
        opacity: 1;
    }
}

@-o-keyframes animateleft {
    from {
        left: -300px;
        opacity: 0;
    }
    to {
        left: 0;
        opacity: 1;
    }
}

@keyframes animateleft {
    from {
        left: -300px;
        opacity: 0;
    }
    to {
        left: 0;
        opacity: 1;
    }
}

@-moz-keyframes animateright {
    from {
        right: -300px;
        opacity: 0;
    }
    to {
        right: 0;
        opacity: 1;
    }
}

@-o-keyframes animateright {
    from {
        right: -300px;
        opacity: 0;
    }
    to {
        right: 0;
        opacity: 1;
    }
}

@keyframes animateright {
    from {
        right: -300px;
        opacity: 0;
    }
    to {
        right: 0;
        opacity: 1;
    }
}

@-webkit-keyframes animatefade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-moz-keyframes animatefade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-o-keyframes animatefade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes animatefade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes animatezoom {
    from {
        -webkit-transform:scale(0,0);
        opacity: 0;
    }
    to {
        -webkit-transform:scale(1,1);
        opacity: 1;
    }
}

@-moz-keyframes animatezoom {
    from {
        -moz-transform:scale(0,0);
        opacity: 0;
    }
    to {
        -moz-transform:scale(1,1);
        opacity: 1;
    }
}

@-o-keyframes animatezoom {
    from {
        -o-transform:scale(0,0);
        opacity: 0;
    }
    to {
        -o-transform:scale(1,1);
        opacity: 1;
    }
}

@keyframes animatezoom {
    from {
        -ms-transform:scale(0,0);
        transform:scale(0,0);
        opacity: 0;
    }
    to {
        -ms-transform:scale(1,1);
        transform:scale(1,1);
        opacity: 1;
    }
}