MediaWiki:Gadget-AmDyCo.css

/* AmDyCo: Amusing Dynamic Content */

.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;
    }
}