.fade-in{
    opacity:0;
    transform:translateY(30px);
    animation:fadeIn .8s ease forwards;
}

.fade-in-delay{
    opacity:0;
    transform:translateY(30px);
    animation:fadeIn 1.2s ease forwards;
}

.slide-left{
    opacity:0;
    transform:translateX(-50px);
    animation:slideLeft .8s ease forwards;
}

.slide-right{
    opacity:0;
    transform:translateX(50px);
    animation:slideRight .8s ease forwards;
}

.zoom-in{
    opacity:0;
    transform:scale(.9);
    animation:zoomIn .8s ease forwards;
}

.float{
    animation:float 4s ease-in-out infinite;
}

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(30px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes slideLeft{
    from{
        opacity:0;
        transform:translateX(-50px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes slideRight{
    from{
        opacity:0;
        transform:translateX(50px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes zoomIn{
    from{
        opacity:0;
        transform:scale(.9);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes float{
    0%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-10px);
    }
    100%{
        transform:translateY(0);
    }
}