Skip to content

Whatsapp animations by Dark-Peace

Write a review Install Get Stylus

Details

AuthorDark-Peace

LicenseNo License

Categorywhatsapp.com

Created

Updated

Code size2.1 kB

Code checksum780d3cdf

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Notes

Userstyle doesn't have notes.

Source code

/* ==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;
    }
}
}

Reviews

No reviews yet.