Spinny Facebook badges by mrjacobbloom

/* ==UserStyle==
@name         Spinny Facebook badges
@version      20211010.17.24
@namespace    userstyles.world/user/mrjacobbloom
@description  Makes Facebook's "messenger" and "notifications" badges orbit around their buttons at different speeds. Inspired by this tweet https://twitter.com/mrjacobbloom/status/1446651567772295169
@author       mrjacobbloom
@license      No License
==/UserStyle== */

@-moz-document domain("facebook.com") {
a[aria-label^="Messenger,"] + div[aria-label^="Messenger,"] {
    animation: badge-spin .4s linear infinite reverse;
}


a[aria-label^="Notifications,"] + div[aria-label^="Notifications,"] {
    animation: badge-spin 3s linear infinite;
}

@keyframes badge-spin {
    from {
        transform-origin: -15px 16px;
        transform: rotate(0deg) translate(15px, -16px) rotate(360deg) translate(-15px, 16px);
    }

    to {
        transform-origin: -15px 16px;
        transform: rotate(360deg) translate(15px, -16px) rotate(0deg) translate(-15px, 16px);
    }
}
}