/* 无动画 */

.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(50px,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(-50px,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);
        }
    }
}