MediaWiki:Common.css: Difference between revisions

no peeking (AF2022 setup)
No edit summary
(no peeking (AF2022 setup))
Line 518: Line 518:
.mobileonly {
.mobileonly {
display: none;
display: none;
}
.aprilfools-blur {
    text-shadow: 0px 0px 0px currentcolor;
    animation: blur 3s infinite linear;
}
.aprilfools-rainbow {
    color: red;
    animation: rainbow 3s infinite linear;
}
.aprilfools-flicker {
    animation: flicker 3s infinite linear;
}
.aprilfools-rise {
    animation: rise 3s infinite linear;
}
.aprilfools-fall {
    animation: fall 3s infinite linear;
}
.aprilfools-fade {
    animation: fade 3s infinite linear;
}
.aprilfools-spin {
    animation: spin 3s infinite linear;
}
.aprilfools-flipx {
    animation: flipx 3s infinite linear;
}
.aprilfools-flipy {
    animation: flipy 3s infinite linear;
}
.aprilfools-throb {
    animation: throb 3s infinite linear;
}
.aprilfools-shudder {
    animation: shudder 3s infinite linear;
}
.aprilfools-topple {
    animation: topple 3s infinite ease-in;
}
.aprilfools-deflate {
    animation: deflate 3s infinite linear;
}
.aprilfools-gnw {
    animation: gnw 3s infinite steps(1);
}
.aprilfools-ghost {
    transform: scale(1000%);
    animation: ghost 10s infinite linear;
}
@keyframes blur {
    0% {
        text-shadow: 0px 0px 0px currentcolor;
    }
    50% {
        text-shadow: 0px 0px 10px currentcolor;
    }
    100% {
        text-shadow: 0px 0px 0px currentcolor;
    }
}
@keyframes rainbow {
    0% {
        color: rgb(255, 0, 0);
    }
    17% {
        color: rgb(255, 255, 0);
    }
    33% {
        color: rgb(0, 255, 0);
    }
    50% {
        color: rgb(0, 255, 255);
    }
    67% {
        color: rgb(0, 0, 255);
    }
    83% {
        color: rgb(255, 0, 255);
    }
    100% {
        color: rgb(255, 0, 0);
    }
}
@keyframes flicker {
    0%,
    2%,
    13%,
    22%,
    74%,
    97% {
        opacity: 0;
    }
    1%,
    3%,
    14%,
    23%,
    75%,
    98% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes rise {
    0% {
        transform: translate(0%, 25%);
        opacity: 0;
    }
    25% {
        transform: translate(0%, 0%);
        opacity: 1;
    }
    75% {
        transform: translate(0%, 0%);
        opacity: 1;
    }
    100% {
        transform: translate(0%, -25%);
        opacity: 0;
    }
}
@keyframes fall {
    0% {
        transform: translate(0%, -25%);
        opacity: 0;
    }
    25% {
        transform: translate(0%, 0%);
        opacity: 1;
    }
    75% {
        transform: translate(0%, 0%);
        opacity: 1;
    }
    100% {
        transform: translate(0%, 25%);
        opacity: 0;
    }
}
@keyframes fade {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(35deg);
    }
    75% {
        transform: rotate(-35deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
@keyframes flipx {
    0% {
        transform: scale(100%, 100%);
    }
    50% {
        transform: scale(-100%, 100%);
    }
    100% {
        transform: scale(100%, 100%);
    }
}
@keyframes flipy {
    0% {
        transform: scale(100%, 100%);
    }
    50% {
        transform: scale(100%, -100%);
    }
    100% {
        transform: scale(100%, 100%);
    }
}
@keyframes throb {
    0% {
        transform: scale(100%);
    }
    25% {
        transform: scale(80%);
    }
    50% {
        transform: scale(100%);
    }
    75% {
        transform: scale(120%);
    }
    100% {
        transform: scale(100%);
    }
}
@keyframes shudder {
    0% {
        transform: translate(0%, 0%);
    }
    2%,
    5%,
    7%,
    23%,
    30%,
    48%,
    53%,
    61%,
    72%,
    88% {
        transform: translate(-25%, 0%);
    }
    4%,
    6%,
    9%,
    28%,
    33%,
    49%,
    55%,
    67%,
    81%,
    92% {
        transform: translate(25%, 0%);
    }
    100% {
        transform: translate(0%, 0%);
    }
}
@keyframes topple {
    0% {
        transform: translate(0%, 0%);
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    75% {
        transform: translate(0%, 1000%) rotate(140deg);
        opacity: 0;
    }
    76% {
        transform: translate(0%, 0%);
        opacity: 0;
    }
    80%,
    100% {
        transform: translate(0%, 0%);
        opacity: 1;
    }
}
@keyframes deflate {
    0% {
        transform: translate(0%, 0%) scale(100%, 100%);
    }
    70% {
        transform: translate(0%, 25%) scale(100%, 20%);
    }
    75% {
        transform: translate(0%, -10%) scale(100%, 120%);
    }
    80%,
    100% {
        transform: translate(0%, 0%) scale(100%, 100%);
    }
}
@keyframes gnw {
    0% {
        transform: rotate(20deg);
    }
    50% {
        transform: rotate(-20deg);
    }
}
@keyframes ghost {
    0% {
        opacity: 0;
    }
    79% {
        opacity: 0;
    }
    80% {
        opacity: 0.025;
    }
    100% {
        opacity: 0;
    }
}
}