@keyframes slideInUp {
    from {
        transform: translate(0, 20%);
    }
    to {
        transform: translate(0, 0);
    }
}
.animate__slideInUp {
    animation: slideInUp 1s;
}

@keyframes slideInRight {
    from{
        transform: translate(5%, 0);
        opacity: 0;
    }
    to{
        transform: translate(0,0);
        opacity: 1;
    }
}
.animate__slideInRight {
    animation: slideInRight 0.75s;
}


@keyframes slideInLeft {
    from{
        transform: translate(-5%, 0);
        opacity: 0;
    }
    to{
        transform: translate(0,0);
        opacity: 1;
    }
}
.animate__slideInLeft {
    animation: slideInLeft 0.75s;
}

@keyframes pulseForSmile {
    0%{
        background-size: 140%;
    }
    50% {
        background-size: 145%;
    }
    100% {
        background-size: 140%;
    }
}
.animate__pulseForSmile {
    animation: pulseForSmile 2s;
}

@keyframes pulse{
    0%{
        background-size: 100%;
    }
    50%{
        background-size: 105%;
    }
    100% {
        background-size: 100%;
    }
}

.animate__pulse {
    animation: pulse 2s;
}

@keyframes slideHidden {
    from{
        transform: translate(0, 100%);
    }
    to{
        transform: translate(0, 0);
    }
}

.animate__slideHidden{
    animation: slideHidden 1s;
}

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

.animate__fadeIn{
    animation: fadeIn 1s;
}