@layer animate {
    @media only screen {
        .animate_on_scroll {
            opacity: 0;
            transition-property: opacity, transform;
        }

        .animate_on_scroll.animated {
            opacity: 1;
        }

        .fade_up {
            transform: translateY(100px);
        }

        .fade_up.animated {
            transform: translateY(0);
        }

        .fade_left {
            transform: translateX(100px);
        }

        .fade_left.animated {
            transform: translateX(0);
        }

        .zoom_in {
            transform: scale(0.8);
        }

        .zoom_in.animated {
            transform: scale(1);
        }

        .rotate_in {
            transform: rotate(-15deg);
        }

        .rotate_in.animated {
            transform: rotate(0);
        }
    }
}