button:hover .gelatineTest1 {
    animation: gelatineTest1 0.5s;
}

@keyframes gelatineTest1 {
    from, to {
        transform: scale(1, 1);
    }

    25% {
        transform: scale(0.9, 1.1);
    }

    50% {
        transform: scale(1.1, 0.9);
    }

    75% {
        transform: scale(0.95, 1.05);
    }
}

button:hover .spinTest1 {
    animation: spinTest1 1s linear;
}

@keyframes spinTest1 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

button:hover .elastic-spinTest1 {
    animation: elastic-spinTest1 1s ease;
}

@keyframes elastic-spinTest1 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(720deg);
    }
}

button:hover .pulseTest1 {
    animation: pulseTest1 1s ease-in-out alternate;
}

@keyframes pulseTest1 {
    from {
        transform: scale(0.8);
    }

    to {
        transform: scale(1.2);
    }
}

button:hover .flashTest1 {
    animation: flashTest1 500ms ease alternate;
}

@keyframes flashTest1 {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

button:hover .hithereTest1 {
    animation: hithereTest1 2s ease;
}

@keyframes hithereTest1 {
    30% {
        transform: scale(1.2);
    }

    40%, 60% {
        transform: rotate(-20deg) scale(1.2);
    }

    50% {
        transform: rotate(20deg) scale(1.2);
    }

    70% {
        transform: rotate(0deg) scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

button:hover .growTest1 {
    animation: growTest1 2s ease;
}

@keyframes growTest1 {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

button:hover .fade-inTest1 {
    animation: fade-inTest1 2s linear;
}

@keyframes fade-inTest1 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

button:hover .fade-outTest1 {
    animation: fade-outTest1 2s linear;
}

@keyframes fade-outTest1 {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

button:hover .bounceTest1 {
    animation: bounceTest1 2s ease;
}

@keyframes bounceTest1 {
    70% {
        transform: translateY(0%);
    }

    80% {
        transform: translateY(-15%);
    }

    90% {
        transform: translateY(0%);
    }

    95% {
        transform: translateY(-7%);
    }

    97% {
        transform: translateY(0%);
    }

    99% {
        transform: translateY(-3%);
    }

    100% {
        transform: translateY(0);
    }
}

button:hover .bounce2Test1 {
    animation: bounce2Test1 2s ease;
}

@keyframes bounce2Test1 {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-30px);
    }

    60% {
        transform: translateY(-15px);
    }
}

button:hover .shakeTest1 {
    animation: shakeTest1 2s ease;
}

@keyframes shakeTest1 {
    0%, 100% {
        transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }

    20%, 40%, 60%, 80% {
        transform: translateX(10px);
    }
}

button:hover .flipTest1 {
    backface-visibility: visible !important;
    animation: flipTest1 2s ease;
}

@keyframes flipTest1 {
    0% {
        transform: perspective(400px) rotateY(0);
        animation-timing-function: ease-out;
    }

    40% {
        transform: perspective(400px) translateZ(150px) rotateY(170deg);
        animation-timing-function: ease-out;
    }

    50% {
        transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        animation-timing-function: ease-in;
    }

    80% {
        transform: perspective(400px) rotateY(360deg) scale(.95);
        animation-timing-function: ease-in;
    }

    100% {
        transform: perspective(400px) scale(1);
        animation-timing-function: ease-in;
    }
}

button:hover .swingTest1 {
    transform-origin: top center;
    animation: swingTest1 2s ease;
}

@keyframes swingTest1 {
    20% {
        transform: rotate(15deg);
    }

    40% {
        transform: rotate(-10deg);
    }

    60% {
        transform: rotate(5deg);
    }

    80% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

button:hover .wobbleTest1 {
    animation: wobbleTest1 2s ease;
}

@keyframes wobbleTest1 {
    0% {
        transform: translateX(0%);
    }

    15% {
        transform: translateX(-25%) rotate(-5deg);
    }

    30% {
        transform: translateX(20%) rotate(3deg);
    }

    45% {
        transform: translateX(-15%) rotate(-3deg);
    }

    60% {
        transform: translateX(10%) rotate(2deg);
    }

    75% {
        transform: translateX(-5%) rotate(-1deg);
    }

    100% {
        transform: translateX(0%);
    }
}

button:hover .fade-in-downTest1 {
    animation: fade-in-downTest1 2s ease;
}

@keyframes fade-in-downTest1 {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

button:hover .fade-in-leftTest1 {
    animation: fade-in-leftTest1 2s ease;
}

@keyframes fade-in-leftTest1 {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

button:hover .fade-out-downTest1 {
    animation: fade-out-downTest1 2s ease;
}

@keyframes fade-out-downTest1 {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(20px);
    }
}

button:hover .fade-out-rightTest1 {
    animation: fade-out-rightTest1 2s ease;
}

@keyframes fade-out-rightTest1 {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(20px);
    }
}

button:hover .bounce-inTest1 {
    animation: bounce-inTest1 2s ease;
}

@keyframes bounce-inTest1 {
    0% {
        opacity: 0;
        transform: scale(.3);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    70% {
        transform: scale(.9);
    }

    100% {
        transform: scale(1);
    }
}

button:hover .bounce-in-rightTest1 {
    animation: bounce-in-rightTest1 2s ease;
}

@keyframes bounce-in-rightTest1 {
    0% {
        opacity: 0;
        transform: translateX(2000px);
    }

    60% {
        opacity: 1;
        transform: translateX(-30px);
    }

    80% {
        transform: translateX(10px);
    }

    100% {
        transform: translateX(0);
    }
}

button:hover .bounce-outTest1 {
    animation: bounce-outTest1 2s ease;
}

@keyframes bounce-outTest1 {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(.95);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }

    100% {
        opacity: 0;
        transform: scale(.3);
    }
}

button:hover .bounce-out-downTest1 {
    animation: bounce-out-downTest1 2s ease;
}

@keyframes bounce-out-downTest1 {
    0% {
        transform: translateY(0);
    }

    20% {
        opacity: 1;
        transform: translateY(-20px);
    }

    100% {
        opacity: 0;
        transform: translateY(20px);
    }
}

button:hover .rotate-in-down-leftTest1 {
    animation: rotate-in-down-leftTest1 2s ease;
}

@keyframes rotate-in-down-leftTest1 {
    0% {
        transform-origin: left bottom;
        transform: rotate(-90deg);
        opacity: 0;
    }

    100% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1;
    }
}

button:hover .rotate-in-up-leftTest1 {
    animation: rotate-in-up-leftTest1 2s ease;
}

@keyframes rotate-in-up-leftTest1 {
    0% {
        transform-origin: left bottom;
        transform: rotate(90deg);
        opacity: 0;
    }

    100% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1;
    }
}

button:hover .hingeTest1 {
    animation: hingeTest1 2s ease;
}

@keyframes hingeTest1 {
    0% {
        transform: rotate(0);
        transform-origin: top left;
        animation-timing-function: ease-in-out;
    }

    20%, 60% {
        transform: rotate(80deg);
        transform-origin: top left;
        animation-timing-function: ease-in-out;
    }

    40% {
        transform: rotate(60deg);
        transform-origin: top left;
        animation-timing-function: ease-in-out;
    }

    80% {
        transform: rotate(60deg) translateY(0);
        opacity: 1;
        transform-origin: top left;
        animation-timing-function: ease-in-out;
    }

    100% {
        transform: translateY(700px);
        opacity: 0;
    }
}

button:hover .roll-inTest1 {
    animation: roll-inTest1 2s ease;
}

@keyframes roll-inTest1 {
    0% {
        opacity: 0;
        transform: translateX(-100%) rotate(-120deg);
    }

    100% {
        opacity: 1;
        transform: translateX(0px) rotate(0deg);
    }
}

button:hover .roll-outTest1 {
    animation: roll-outTest1 2s ease;
}

@keyframes roll-outTest1 {
    0% {
        opacity: 1;
        transform: translateX(0px) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: translateX(100%) rotate(120deg);
    }
}