tailwindcss-animated/src/utilities/predefined-animations.css

Extended animation utilities for Tailwind CSS

@theme default {
    --animate-spin: spin var(--default-animation-duration, 1s) var(--default-animation-timing-function, linear) var(--default-animation-delay, 0s) infinite;
    --animate-ping: ping var(--default-animation-duration, 1s) var(--default-animation-timing-function, cubic-bezier(0, 0, 0.2, 1)) var(--default-animation-delay, 0s) infinite;
    --animate-pulse: pulse var(--default-animation-duration, 2s) var(--default-animation-timing-function, cubic-bezier(0.4, 0, 0.6, 1)) var(--default-animation-delay, 0s) infinite;
    --animate-bounce: bounce var(--default-animation-duration, 1s) var(--default-animation-timing-function, ease) var(--default-animation-delay, 0s) infinite;

    --animate-wiggle: wiggle var(--default-animation-duration, 1s) var(--default-animation-timing-function, ease) var(--default-animation-delay, 0s) both;
    --animate-wiggle-more: wiggle-more var(--default-animation-duration, 1s) var(--default-animation-timing-function, ease) var(--default-animation-delay, 0s) both;
    --animate-rotate-y: rotate-y var(--default-animation-duration, 1s) var(--default-animation-timing-function, ease) var(--default-animation-delay, 0s) both;
    --animate-rotate-x: rotate-x var(--default-animation-duration, 1s) var(--default-animation-timing-function, ease) var(--default-animation-delay, 0s) both;
    --animate-jump: jump var(--default-animation-duration, 0.5s) var(--default-animation-timing-function, ease) var(--default-animation-delay, 0s) both;
    --animate-jump-in: jump-in var(--default-animation-duration, 0.5s) var(--default-animation-timing-function, ease) var(--default-animation-delay, 0s) both;
    --animate-jump-out: jump-out var(--default-animation-duration, 0.5s) var(--default-animation-timing-function, ease) var(--default-animation-delay, 0s) both;
    --animate-shake: shake var(--default-animation-duration, 0.5s) var(--default-animation-timing-function, ease) var(--default-animation-delay, 0s) both;
    --animate-fade: fade var(--default-animation-duration, 1s) var(--default-animation-timing-function, ease) var(--default-animation-delay, 0s) both;
    --animate-fade-down: fade-down var(--default-animation-duration, 1s) var(--default-animation-timing-function, ease) var(--default-animation-delay, 0s) both;
    --animate-fade-up: fade-up var(--default-animation-duration, 1s) var(--default-animation-timing-function, ease) var(--default-animation-delay, 0s) both;
    --animate-fade-left: fade-left var(--default-animation-duration, 1s) var(--default-animation-timing-function, ease) var(--default-animation-delay, 0s) both;
    --animate-fade-right: fade-right var(--default-animation-duration, 1s) var(--default-animation-timing-function, ease) var(--default-animation-delay, 0s) both;
    --animate-flip-up: flip-up var(--default-animation-duration, 1s) var(--default-animation-timing-function, ease) var(--default-animation-delay, 0s) both;
    --animate-flip-down: flip-down var(--default-animation-duration, 1s) var(--default-animation-timing-function, ease) var(--default-animation-delay, 0s) both;

    @keyframes wiggle {
        0%,
        100% {
            transform: rotate(-3deg);
        }
        50% {
            transform: rotate(3deg);
        }
    }

    @keyframes wiggle-more {
        0%,
        100% {
            transform: rotate(-12deg);
        }
        50% {
            transform: rotate(12deg);
        }
    }

    @keyframes rotate-y {
        0% {
            transform: rotateY(360deg);
        }
        100% {
            transform: rotateY(0);
        }
    }

    @keyframes rotate-x {
        0% {
            transform: rotateX(360deg);
        }
        100% {
            transform: rotateX(0);
        }
    }

    @keyframes jump {
        0%,
        100% {
            transform: scale(1);
        }
        10% {
            transform: scale(0.8);
        }
        50% {
            transform: scale(1.2);
        }
    }

    @keyframes jump-in {
        0% {
            transform: scale(0);
        }
        80% {
            transform: scale(1.2);
        }
        100% {
            transform: scale(1);
        }
    }

    @keyframes jump-out {
        0% {
            transform: scale(100%);
        }
        20% {
            transform: scale(120%);
        }
        100% {
            transform: scale(0);
        }
    }

    @keyframes shake {
        0% {
            transform: translateX(0);
        }
        25% {
            transform: translateX(-1rem);
        }
        75% {
            transform: translateX(1rem);
        }
        100% {
            transform: translateX(0);
        }
    }

    @keyframes fade {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    @keyframes fade-down {
        0% {
            opacity: 0;
            transform: translateY(-2rem);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fade-up {
        0% {
            opacity: 0;
            transform: translateY(2rem);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fade-left {
        0% {
            opacity: 0;
            transform: translateX(2rem);
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes fade-right {
        0% {
            opacity: 0;
            transform: translateX(-2rem);
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes flip-up {
        0% {
            transform: rotateX(90deg);
            transform-origin: bottom;
        }
        100% {
            transform: rotateX(0);
            transform-origin: bottom;
        }
    }

    @keyframes flip-down {
        0% {
            transform: rotateX(-90deg);
            transform-origin: top;
        }
        100% {
            transform: rotateX(0);
            transform-origin: top;
        }
    }
}