Whatsapp animations by Dark-Peace

/* ==UserStyle==
@name         Whatsapp animations
@version      20230817.11.41
@namespace    ?
==/UserStyle== */

@-moz-document domain("whatsapp.com") {
._3AwwN{
    animation: fade-in-left 300ms 200ms;
    opacity: 0;
    animation-fill-mode: forwards;
}
._3zJZ2{
    animation: fade-in-top 300ms 200ms;
    opacity: 0;
    animation-fill-mode: forwards;
}

._3AwwN.fadeOut{
    animation: fade-out-left 300ms 200ms;
    animation-fill-mode: forwards;
}
._3zJZ2.fadeOut{
    animation: fade-out-top 300ms 200ms;
    animation-fill-mode: forwards;
}

html[dir="ltr"] .message-in{
    animation: message-in 300ms;
    transform-origin: left;
}

html[dir="ltr"] .message-out{
    animation: message-out 300ms;
    transform-origin: right;
}


@keyframes fade-in-left{
    0%{
        transform: translateX(-50px) scale(1, 1);
        opacity: 0;
    }
    100%{
        transform: translateX(0px) scale(1, 1);
        opacity: 1;
    }
}

@keyframes fade-in-top{
    0%{
        transform: translateY(-50px) scale(1, 1);
        opacity: 0;
    }
    100%{
        transform: translateY(0px) scale(1, 1);
        opacity: 1;
    }
}

@keyframes fade-out-left{
    0%{
        transform: translateX(0px) scale(1, 1);
        opacity: 1;
    }
    100%{
        transform: translateX(-50px) scale(1, 1);
        opacity: 0;
    }
}

@keyframes fade-out-top{
    0%{
        transform: translateY(0px) scale(1, 1);
        opacity: 1;
    }
    100%{
        transform: translateY(-50px) scale(1, 1);
        opacity: 0;
    }
}

@keyframes message-in{
    0%{
        transform: translate3d(50px, 50px, 0) scale(0, 0);
        opacity: 0;
    }
    50%{
        transform: translate3d(50px, 25px, 0) scale(0, 1);
    }
    100%{
        transform: translate3d(0, 0, 0) scale(1, 1);
        opacity: 1;
    }
}
@keyframes message-out{
    0%{
        transform: translate3d(50px, 50px, 0) scale(0, 0);
        opacity: 0;
    }
    50%{
        transform: translate3d(50px, 25px, 0) scale(0, 1);
    }
    100%{
        transform: translate3d(0, 0, 0) scale(1, 1);
        opacity: 1;
    }
}
}