/* 无动画 */

.lazyload-none.lazyload-none-visible {}

/* 定义从下到上的动画 */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translate3d(0, 60px, 0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.lazyload-up.lazyload-up-visible {
    animation: slideUp 1.6s ease-in-out .1s both;
}

/* 定义从下到上的动画(大幅度) */
@keyframes slideMaxUp {
    from {
        opacity: 0;
        transform: translate3d(0, 80px, 0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.lazyload-max-up.lazyload-maxup-visible {
    animation: slideMaxUp 1.4s ease-in-out .1s both;
}

/* 定义从右往左的动画 */
@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translate3d(80px, 0, 0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.lazyload-left.lazyload-left-visible {
    animation: slideLeft 1.5s ease-in-out .4s both;
}

/* 定义从左往右的动画 */
@keyframes slideRight {
    from {
        opacity: 0;
        transform: translate3d(-80px, 0, 0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.lazyload-right.lazyload-right-visible {
    animation: slideRight 1.5s ease-in-out .4s both;
}

/* 渐显动画动画 */
@keyframes slideIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.lazyload-in.lazyload-in-visible {
    animation: slideIn 2.5s ease-in-out .2s both;
}

/* 图片放大动画 */
.img-magnify {
    overflow: hidden;

    >img {
        transition: all 0.5s;

        &:hover {
            transform: scale(1.1);
        }
    }
}