{"id":2123,"date":"2024-10-03T17:27:36","date_gmt":"2024-10-03T11:27:36","guid":{"rendered":"https:\/\/getrizwan.com\/ecom\/?page_id=2123"},"modified":"2024-10-04T00:26:00","modified_gmt":"2024-10-03T18:26:00","slug":"css-js-animation-gallery","status":"publish","type":"page","link":"https:\/\/getrizwan.com\/ecom\/css-js-animation-gallery\/","title":{"rendered":"CSS JS Animation Gallery"},"content":{"rendered":"\n<style>\n      body {\n        font-family: Arial, sans-serif;\n        padding: 20px;\n      }\n\n      .container {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 20px;\n      }\n\n      .animation-box {\n        width: 23.5%;\n        padding: 20px;\n        background-color: #f9f9f9;\n        border-radius: 8px;\n        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n        text-align: center;\n        font-size: 16px;\n        position: relative;\n      }\n\n      .animation-title {\n        font-size: 20px;\n        margin-bottom: 10px;\n        color:#000000;\n      }\n\n      .output {\n        display: inline-block;\n        padding: 20px;\n        font-size: 24px;\n        margin: 10px 0;\n        background: #e0e0e0;\n        border-radius: 10px;\n        text-align: center;\n      }\n\n      button {\n        padding: 10px 15px;\n        font-size: 16px;\n        border: none;\n        border-radius: 5px;\n        margin-top: 10px;\n        cursor: pointer;\n      }\n\n      .trigger-btn {\n        background-color: #5cb85c;\n        color: white;\n      }\n\n      .copy-btn {\n        background-color: #0275d8;\n        color: white;\n      }\n\n      .copy-notification {\n        position: absolute;\n        top: -20px;\n        right: 20px;\n        background-color: #5cb85c;\n        color: white;\n        padding: 5px 10px;\n        border-radius: 5px;\n        display: none;\n      }\n\n      \/* Keyframes for all animations *\/\n      @keyframes fadeIn {\n        from {\n          opacity: 0;\n        }\n        to {\n          opacity: 1;\n        }\n      }\n      @keyframes slide-left {\n        from {\n          transform: translateX(-100%);\n        }\n        to {\n          transform: translateX(0);\n        }\n      }\n      @keyframes slide-right {\n        from {\n          transform: translateX(100%);\n        }\n        to {\n          transform: translateX(0);\n        }\n      }\n      @keyframes bounce {\n        0%,\n        20%,\n        50%,\n        80%,\n        100% {\n          transform: translateY(0);\n        }\n        40% {\n          transform: translateY(-30px);\n        }\n        60% {\n          transform: translateY(-15px);\n        }\n      }\n      @keyframes zoom-in {\n        from {\n          transform: scale(0);\n        }\n        to {\n          transform: scale(1);\n        }\n      }\n      @keyframes zoom-out {\n        from {\n          transform: scale(1);\n        }\n        to {\n          transform: scale(0);\n        }\n      }\n      @keyframes flip {\n        from {\n          transform: rotateY(0);\n        }\n        to {\n          transform: rotateY(180deg);\n        }\n      }\n      @keyframes heartbeat {\n        0%,\n        100% {\n          transform: scale(1);\n        }\n        50% {\n          transform: scale(1.1);\n        }\n      }\n      @keyframes jump {\n        0% {\n          transform: translateY(0);\n        }\n        50% {\n          transform: translateY(-30px);\n        }\n        100% {\n          transform: translateY(0);\n        }\n      }\n      @keyframes glow {\n        0%,\n        100% {\n          text-shadow: 0 0 5px rgba(255, 255, 255, 0);\n        }\n        50% {\n          text-shadow: 0 0 20px rgba(255, 255, 255, 1);\n        }\n      }\n      @keyframes wave {\n        0%,\n        100% {\n          transform: translateY(0);\n        }\n        25% {\n          transform: translateY(-10px);\n        }\n        75% {\n          transform: translateY(10px);\n        }\n      }\n      @keyframes roll-in {\n        from {\n          transform: translateX(100%);\n        }\n        to {\n          transform: translateX(0);\n        }\n      }\n      @keyframes roll-out {\n        from {\n          transform: translateX(0);\n        }\n        to {\n          transform: translateX(100%);\n        }\n      }\n      @keyframes light-speed {\n        from {\n          transform: scale(0);\n        }\n        to {\n          transform: scale(1);\n        }\n      }\n      @keyframes zoom-in-right {\n        from {\n          transform: translateX(100%) scale(0);\n        }\n        to {\n          transform: translateX(0) scale(1);\n        }\n      }\n      @keyframes zoom-in-left {\n        from {\n          transform: translateX(-100%) scale(0);\n        }\n        to {\n          transform: translateX(0) scale(1);\n        }\n      }\n      @keyframes rotate-in {\n        from {\n          transform: rotate(360deg);\n        }\n        to {\n          transform: rotate(0);\n        }\n      }\n      @keyframes rotate-out {\n        from {\n          transform: rotate(0);\n        }\n        to {\n          transform: rotate(360deg);\n        }\n      }\n      @keyframes fade-out {\n        from {\n          opacity: 1;\n        }\n        to {\n          opacity: 0;\n        }\n      }\n      @keyframes swing-in {\n        from {\n          transform: rotate(30deg);\n        }\n        to {\n          transform: rotate(0);\n        }\n      }\n      @keyframes slide-up {\n        from {\n          transform: translateY(100%);\n        }\n        to {\n          transform: translateY(0);\n        }\n      }\n      @keyframes slide-down {\n        from {\n          transform: translateY(-100%);\n        }\n        to {\n          transform: translateY(0);\n        }\n      }\n      @keyframes fade-up {\n        from {\n          opacity: 0;\n          transform: translateY(20px);\n        }\n        to {\n          opacity: 1;\n          transform: translateY(0);\n        }\n      }\n      @keyframes fade-down {\n        from {\n          opacity: 0;\n          transform: translateY(-20px);\n        }\n        to {\n          opacity: 1;\n          transform: translateY(0);\n        }\n      }\n      @keyframes light-bounce {\n        0%,\n        100% {\n          transform: translateY(0);\n        }\n        50% {\n          transform: translateY(-10px);\n        }\n      }\n      @keyframes glide {\n        from {\n          transform: translateX(0);\n        }\n        to {\n          transform: translateX(20px);\n        }\n      }\n      @keyframes vibrate {\n        0%,\n        100% {\n          transform: translateX(0);\n        }\n        25% {\n          transform: translateX(-2px);\n        }\n        50% {\n          transform: translateX(2px);\n        }\n        75% {\n          transform: translateX(-2px);\n        }\n      }\n      @keyframes dance {\n        0%,\n        100% {\n          transform: translateY(0);\n        }\n        25% {\n          transform: translateY(-10px);\n        }\n        50% {\n          transform: translateY(10px);\n        }\n      }\n      @keyframes jelly {\n        0%,\n        100% {\n          transform: translateY(0);\n        }\n        50% {\n          transform: translateY(-5px);\n        }\n      }\n\n      \/* Additional animations *\/\n      @keyframes shake {\n        0%,\n        100% {\n          transform: translateX(0);\n        }\n        25%,\n        75% {\n          transform: translateX(-10px);\n        }\n        50% {\n          transform: translateX(10px);\n        }\n      }\n      @keyframes pulse {\n        0%,\n        100% {\n          transform: scale(1);\n        }\n        50% {\n          transform: scale(1.05);\n        }\n      }\n      @keyframes wobble {\n        0%,\n        100% {\n          transform: translateX(0);\n        }\n        25% {\n          transform: translateX(-10px) rotate(-5deg);\n        }\n        50% {\n          transform: translateX(10px) rotate(5deg);\n        }\n        75% {\n          transform: translateX(-5px) rotate(-2deg);\n        }\n      }\n      @keyframes swing {\n        20% {\n          transform: rotate(15deg);\n        }\n        40% {\n          transform: rotate(-10deg);\n        }\n        60% {\n          transform: rotate(5deg);\n        }\n        80% {\n          transform: rotate(-5deg);\n        }\n        100% {\n          transform: rotate(0deg);\n        }\n      }\n      @keyframes flash {\n        0%,\n        50%,\n        100% {\n          opacity: 1;\n        }\n        25%,\n        75% {\n          opacity: 0;\n        }\n      }\n      @keyframes rubberBand {\n        0% {\n          transform: scale3d(1, 1, 1);\n        }\n        30% {\n          transform: scale3d(1.25, 0.75, 1);\n        }\n        40% {\n          transform: scale3d(0.75, 1.25, 1);\n        }\n        50% {\n          transform: scale3d(1.15, 0.85, 1);\n        }\n        65% {\n          transform: scale3d(0.95, 1.05, 1);\n        }\n        75% {\n          transform: scale3d(1.05, 0.95, 1);\n        }\n        100% {\n          transform: scale3d(1, 1, 1);\n        }\n      }\n\n      @keyframes spin {\n        from {\n          transform: rotate(0deg);\n        }\n        to {\n          transform: rotate(360deg);\n        }\n      }\n\n      \/* Animation classes *\/\n      .fadeIn {\n        animation: fadeIn 1s;\n      }\n      .slide-left {\n        animation: slide-left 1s;\n      }\n      .slide-right {\n        animation: slide-right 1s;\n      }\n      .bounce {\n        animation: bounce 1s;\n      }\n      .zoom-in {\n        animation: zoom-in 1s;\n      }\n      .zoom-out {\n        animation: zoom-out 1s;\n      }\n      .flip {\n        animation: flip 1s;\n      }\n      .heartbeat {\n        animation: heartbeat 1s;\n      }\n      .jump {\n        animation: jump 1s;\n      }\n      .glow {\n        animation: glow 1s;\n      }\n      .wave {\n        animation: wave 1s;\n      }\n      .roll-in {\n        animation: roll-in 1s;\n      }\n      .roll-out {\n        animation: roll-out 1s;\n      }\n      .light-speed {\n        animation: light-speed 1s;\n      }\n      .zoom-in-right {\n        animation: zoom-in-right 1s;\n      }\n      .zoom-in-left {\n        animation: zoom-in-left 1s;\n      }\n      .rotate-in {\n        animation: rotate-in 1s;\n      }\n      .rotate-out {\n        animation: rotate-out 1s;\n      }\n      .fade-out {\n        animation: fade-out 1s;\n      }\n      .swing-in {\n        animation: swing-in 1s;\n      }\n      .slide-up {\n        animation: slide-up 1s;\n      }\n      .slide-down {\n        animation: slide-down 1s;\n      }\n      .fade-up {\n        animation: fade-up 1s;\n      }\n      .fade-down {\n        animation: fade-down 1s;\n      }\n      .light-bounce {\n        animation: light-bounce 1s;\n      }\n      .glide {\n        animation: glide 1s;\n      }\n      .vibrate {\n        animation: vibrate 1s;\n      }\n      .dance {\n        animation: dance 1s;\n      }\n      .jelly {\n        animation: jelly 1s;\n      }\n      .shake {\n        animation: shake 1s;\n      }\n      .pulse {\n        animation: pulse 1s;\n      }\n      .wobble {\n        animation: wobble 1s;\n      }\n      .swing {\n        animation: swing 1s;\n      }\n      .flash {\n        animation: flash 1s;\n      }\n      .rubberBand {\n        animation: rubberBand 1s;\n      }\n      .spin {\n        animation: spin 1s linear infinite;\n      }\n\n      @keyframes light-speed {\n        0% {\n          transform: translateX(-100%);\n        }\n        100% {\n          transform: translateX(0);\n        }\n      }\n\n      .light-speed {\n        animation: light-speed 0.5s ease-in-out;\n      }\n\n      @keyframes slide-in-blur {\n        0% {\n          transform: translateX(-100%);\n          filter: blur(5px);\n        }\n        100% {\n          transform: translateX(0);\n          filter: blur(0);\n        }\n      }\n\n      .slide-in-blur {\n        animation: slide-in-blur 0.5s ease-in-out;\n      }\n\n      @keyframes flip-scale {\n        0% {\n          transform: scale(0) rotateY(180deg);\n        }\n        100% {\n          transform: scale(1) rotateY(0);\n        }\n      }\n\n      .flip-scale {\n        animation: flip-scale 0.5s ease-in-out;\n      }\n\n      @keyframes rotate-blur {\n        0% {\n          transform: rotate(0deg) translateX(-50%);\n          filter: blur(5px);\n        }\n        100% {\n          transform: rotate(360deg) translateX(0);\n          filter: blur(0);\n        }\n      }\n\n      .rotate-blur {\n        animation: rotate-blur 1s ease-in-out;\n      }\n\n      @keyframes skew-in {\n        0% {\n          transform: skewX(-100%) translateY(-100%);\n        }\n        100% {\n          transform: skewX(0) translateY(0);\n        }\n      }\n\n      .skew-in {\n        animation: skew-in 0.5s ease-in-out;\n      }\n\n      @keyframes zoom-bounce {\n        0% {\n          transform: scale(0);\n        }\n        50% {\n          transform: scale(1.2);\n        }\n        100% {\n          transform: scale(1);\n        }\n      }\n\n      .zoom-bounce {\n        animation: zoom-bounce 0.5s ease-in-out;\n      }\n\n      @keyframes pop-in {\n        0% {\n          transform: scale(0);\n          opacity: 0;\n        }\n        100% {\n          transform: scale(1);\n          opacity: 1;\n        }\n      }\n\n      .pop-in {\n        animation: pop-in 0.5s ease-in-out;\n      }\n\n      @keyframes roll-spin {\n        0% {\n          transform: rotate(0deg);\n        }\n        100% {\n          transform: rotate(360deg);\n        }\n      }\n\n      .roll-spin {\n        animation: roll-spin 1s ease-in-out;\n      }\n\n      @keyframes shrink-grow {\n        0% {\n          transform: scale(1);\n        }\n        100% {\n          transform: scale(0.5);\n        }\n      }\n\n      .shrink-grow {\n        animation: shrink-grow 0.5s ease-in-out;\n      }\n\n      @keyframes zigzag {\n        0%,\n        100% {\n          transform: translateX(0);\n        }\n        25% {\n          transform: translateX(10px);\n        }\n        50% {\n          transform: translateX(-10px);\n        }\n        75% {\n          transform: translateX(10px);\n        }\n      }\n\n      .zigzag {\n        animation: zigzag 0.5s ease-in-out;\n      }\n\n      @keyframes fade-up-rotate {\n        0% {\n          opacity: 0;\n          transform: translateY(20px) rotate(0deg);\n        }\n        100% {\n          opacity: 1;\n          transform: translateY(0) rotate(360deg);\n        }\n      }\n\n      .fade-up-rotate {\n        animation: fade-up-rotate 0.5s ease-in-out;\n      }\n\n      @keyframes blur-in {\n        0% {\n          opacity: 0;\n          filter: blur(5px);\n        }\n        100% {\n          opacity: 1;\n          filter: blur(0);\n        }\n      }\n\n      .blur-in {\n        animation: blur-in 0.5s ease-in-out;\n      }\n\n      @keyframes stretch-in {\n        0% {\n          transform: scale(0);\n        }\n        100% {\n          transform: scale(1);\n        }\n      }\n\n      .stretch-in {\n        animation: stretch-in 0.5s ease-in-out;\n      }\n\n      @keyframes tilt {\n        0% {\n          transform: rotate(0deg);\n        }\n        100% {\n          transform: rotate(15deg);\n        }\n      }\n\n      .tilt {\n        animation: tilt 0.5s ease-in-out;\n      }\n\n      @keyframes drift-in {\n        0% {\n          transform: translateX(-100%);\n        }\n        100% {\n          transform: translateX(0);\n        }\n      }\n\n      .drift-in {\n        animation: drift-in 0.5s ease-in-out;\n      }\n\n      @keyframes spiral-in {\n        0% {\n          transform: translate(0, 0) rotate(0);\n        }\n        100% {\n          transform: translate(50px, 50px) rotate(360deg);\n        }\n      }\n\n      .spiral-in {\n        animation: spiral-in 0.5s ease-in-out;\n      }\n\n      @keyframes flip-diagonal {\n        0% {\n          transform: scale(0) rotateY(180deg);\n        }\n        100% {\n          transform: scale(1) rotateY(0);\n        }\n      }\n\n      .flip-diagonal {\n        animation: flip-diagonal 0.5s ease-in-out;\n      }\n\n      @keyframes pop-up {\n        0% {\n          transform: translateY(20px);\n          opacity: 0;\n        }\n        100% {\n          transform: translateY(0);\n          opacity: 1;\n        }\n      }\n\n      .pop-up {\n        animation: pop-up 0.5s ease-in-out;\n      }\n\n      @keyframes shrink {\n        0% {\n          transform: scale(1);\n        }\n        100% {\n          transform: scale(0);\n        }\n      }\n\n      .shrink {\n        animation: shrink 0.5s ease-in-out;\n      }\n\n      @keyframes twirl {\n        0% {\n          transform: rotate(0deg);\n        }\n        100% {\n          transform: rotate(360deg);\n        }\n      }\n\n      .twirl {\n        animation: twirl 0.5s ease-in-out;\n      }\n\n      @keyframes squeeze {\n        0% {\n          transform: scale(1);\n        }\n        100% {\n          transform: scale(0.5);\n        }\n      }\n\n      .squeeze {\n        animation: squeeze 0.5s ease-in-out;\n      }\n\n      @keyframes fade-zoom {\n        0% {\n          opacity: 0;\n          transform: scale(0);\n        }\n        100% {\n          opacity: 1;\n          transform: scale(1);\n        }\n      }\n\n      .fade-zoom {\n        animation: fade-zoom 0.5s ease-in-out;\n      }\n\n      @keyframes flap {\n        0% {\n          transform: rotate(0deg);\n        }\n        50% {\n          transform: rotate(-20deg);\n        }\n        100% {\n          transform: rotate(0deg);\n        }\n      }\n\n      .flap {\n        animation: flap 0.5s ease-in-out;\n      }\n\n      @keyframes ripple {\n        0% {\n          transform: scale(1);\n        }\n        100% {\n          transform: scale(1.5);\n          opacity: 0;\n        }\n      }\n\n      .ripple {\n        animation: ripple 0.5s ease-in-out;\n      }\n\n      @keyframes roll-left {\n        0% {\n          transform: rotate(0deg) translateX(0);\n        }\n        100% {\n          transform: rotate(-360deg) translateX(-50%);\n        }\n      }\n\n      .roll-left {\n        animation: roll-left 0.5s ease-in-out;\n      }\n\n      @keyframes vibrate {\n        0%,\n        100% {\n          transform: translateX(0);\n        }\n        25% {\n          transform: translateX(-2px);\n        }\n        75% {\n          transform: translateX(2px);\n        }\n      }\n\n      .vibrate {\n        animation: vibrate 0.3s ease-in-out infinite;\n      }\n\n      @keyframes bounce-zoom {\n        0% {\n          transform: scale(0);\n        }\n        50% {\n          transform: scale(1.2);\n        }\n        100% {\n          transform: scale(1);\n        }\n      }\n\n      .bounce-zoom {\n        animation: bounce-zoom 0.5s ease-in-out;\n      }\n\n      @keyframes glimmer {\n        0% {\n          opacity: 0;\n        }\n        100% {\n          opacity: 1;\n        }\n      }\n\n      .glimmer {\n        animation: glimmer 0.5s ease-in-out;\n      }\n\n      @keyframes shake-rotate {\n        0% {\n          transform: rotate(0deg);\n        }\n        50% {\n          transform: rotate(10deg);\n        }\n        100% {\n          transform: rotate(0deg);\n        }\n      }\n\n      .shake-rotate {\n        animation: shake-rotate 0.5s ease-in-out;\n      }\n\n      @keyframes fade-twist {\n        0% {\n          opacity: 0;\n          transform: rotate(0deg);\n        }\n        100% {\n          opacity: 1;\n          transform: rotate(360deg);\n        }\n      }\n\n      .fade-twist {\n        animation: fade-twist 0.5s ease-in-out;\n      }\n\n      @keyframes pulse-wave {\n        0%,\n        100% {\n          transform: scale(1);\n        }\n        50% {\n          transform: scale(1.1);\n        }\n      }\n\n      .pulse-wave {\n        animation: pulse-wave 0.5s ease-in-out;\n      }\n\n      @keyframes spiral-slide {\n        0% {\n          transform: translate(0, 0) rotate(0);\n        }\n        100% {\n          transform: translate(50px, 50px) rotate(360deg);\n        }\n      }\n\n      .spiral-slide {\n        animation: spiral-slide 0.5s ease-in-out;\n      }\n\n      @keyframes stretch-in {\n        0% {\n          transform: scale(0);\n        }\n        100% {\n          transform: scale(1);\n        }\n      }\n\n      .stretch-in {\n        animation: stretch-in 0.5s ease-in-out;\n      }\n\n      @keyframes flip-pulse {\n        0% {\n          transform: scale(0) rotateY(180deg);\n        }\n        100% {\n          transform: scale(1) rotateY(0);\n        }\n      }\n\n      .flip-pulse {\n        animation: flip-pulse 0.5s ease-in-out;\n      }\n\n      @keyframes fade-scale {\n        0% {\n          opacity: 0;\n          transform: scale(0);\n        }\n        100% {\n          opacity: 1;\n          transform: scale(1);\n        }\n      }\n\n      .fade-scale {\n        animation: fade-scale 0.5s ease-in-out;\n      }\n\n      @keyframes swirl-in {\n        0% {\n          transform: rotate(0deg) translateY(50%);\n        }\n        100% {\n          transform: rotate(360deg) translateY(0);\n        }\n      }\n\n      .swirl-in {\n        animation: swirl-in 0.5s ease-in-out;\n      }\n\n      @keyframes step-slide {\n        0% {\n          transform: translateX(-100%);\n        }\n        100% {\n          transform: translateX(0);\n        }\n      }\n\n      .step-slide {\n        animation: step-slide 0.5s ease-in-out;\n      }\n\n      @keyframes blinking-glow {\n        0%,\n        100% {\n          opacity: 1;\n        }\n        50% {\n          opacity: 0;\n        }\n      }\n\n      .blinking-glow {\n        animation: blinking-glow 1s infinite;\n      }\n\n      @keyframes elastic-bounce {\n        0% {\n          transform: scale(0);\n        }\n        50% {\n          transform: scale(1.2);\n        }\n        100% {\n          transform: scale(1);\n        }\n      }\n\n      .elastic-bounce {\n        animation: elastic-bounce 0.5s ease-in-out;\n      }\n\n      @keyframes wave-pulse {\n        0% {\n          transform: scale(1);\n        }\n        50% {\n          transform: scale(1.1);\n        }\n        100% {\n          transform: scale(1);\n        }\n      }\n\n      .wave-pulse {\n        animation: wave-pulse 0.5s ease-in-out;\n      }\n\n      @keyframes fade-left {\n        0% {\n          transform: translateX(-100%);\n          opacity: 0;\n        }\n        100% {\n          transform: translateX(0);\n          opacity: 1;\n        }\n      }\n\n      .fade-left {\n        animation: fade-left 0.5s ease-in-out;\n      }\n\n      @keyframes vertical-slide {\n        0% {\n          transform: translateY(-100%);\n        }\n        100% {\n          transform: translateY(0);\n        }\n      }\n\n      .vertical-slide {\n        animation: vertical-slide 0.5s ease-in-out;\n      }\n\n      @keyframes spin-stretch {\n        0% {\n          transform: scale(1) rotate(0deg);\n        }\n        100% {\n          transform: scale(1.5) rotate(360deg);\n        }\n      }\n\n      .spin-stretch {\n        animation: spin-stretch 0.5s ease-in-out;\n      }\n\n      @keyframes tilt-in {\n        0% {\n          transform: rotate(-15deg);\n        }\n        100% {\n          transform: rotate(0);\n        }\n      }\n\n      .tilt-in {\n        animation: tilt-in 0.5s ease-in-out;\n      }\n\n      @keyframes floating-lift {\n        0% {\n          transform: translateY(20px);\n        }\n        100% {\n          transform: translateY(0);\n        }\n      }\n\n      .floating-lift {\n        animation: floating-lift 0.5s ease-in-out;\n      }\n\n      @keyframes slide-fade {\n        0% {\n          opacity: 0;\n          transform: translateX(-100%);\n        }\n        100% {\n          opacity: 1;\n          transform: translateX(0);\n        }\n      }\n\n      .slide-fade {\n        animation: slide-fade 0.5s ease-in-out;\n      }\n\n      @keyframes bounce-in {\n        0% {\n          transform: scale(0);\n          opacity: 0;\n        }\n        100% {\n          transform: scale(1);\n          opacity: 1;\n        }\n      }\n\n      .bounce-in {\n        animation: bounce-in 0.5s ease-in-out;\n      }\n\n      @keyframes rock-and-roll {\n        0% {\n          transform: rotate(0deg);\n        }\n        50% {\n          transform: rotate(10deg);\n        }\n        100% {\n          transform: rotate(0deg);\n        }\n      }\n\n      .rock-and-roll {\n        animation: rock-and-roll 0.5s ease-in-out;\n      }\n\n      @keyframes shadow-lift {\n        0% {\n          transform: translateY(0);\n          box-shadow: 0 0 0 transparent;\n        }\n        100% {\n          transform: translateY(-10px);\n          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);\n        }\n      }\n\n      .shadow-lift {\n        animation: shadow-lift 0.5s ease-in-out;\n      }\n\n      @keyframes slide-out {\n        0% {\n          transform: translateX(0);\n          opacity: 1;\n        }\n        100% {\n          transform: translateX(100%);\n          opacity: 0;\n        }\n      }\n\n      .slide-out {\n        animation: slide-out 0.5s ease-in-out;\n      }\n\n      @keyframes twirl {\n        0% {\n          transform: rotate(0deg);\n        }\n        100% {\n          transform: rotate(360deg);\n        }\n      }\n\n      .twirl {\n        animation: twirl 0.5s ease-in-out;\n      }\n    <\/style>\n\n\n\n<div class=\"container\">\n      <!-- Animation example box -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"fadeIn\"\n        data-keyframe=\"@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }\"\n        data-animation-class=\".fadeIn { animation: fadeIn 1s; }\"\n      >\n        <div class=\"animation-title\">Fade In<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"slide-left\"\n        data-keyframe=\"@keyframes slide-left { from { transform: translateX(-100%); } to { transform: translateX(0); } }\"\n        data-animation-class=\".slide-left { animation: slide-left 1s; }\"\n      >\n        <div class=\"animation-title\">Slide Left<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"slide-right\"\n        data-keyframe=\"@keyframes slide-right { from { transform: translateX(100%); } to { transform: translateX(0); } }\"\n        data-animation-class=\".slide-right { animation: slide-right 1s; }\"\n      >\n        <div class=\"animation-title\">Slide Right<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"bounce\"\n        data-keyframe=\"@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } }\"\n        data-animation-class=\".bounce { animation: bounce 1s; }\"\n      >\n        <div class=\"animation-title\">Bounce<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"zoom-in\"\n        data-keyframe=\"@keyframes zoom-in { from { transform: scale(0); } to { transform: scale(1); } }\"\n        data-animation-class=\".zoom-in { animation: zoom-in 1s; }\"\n      >\n        <div class=\"animation-title\">Zoom In<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"zoom-out\"\n        data-keyframe=\"@keyframes zoom-out { from { transform: scale(1); } to { transform: scale(0); } }\"\n        data-animation-class=\".zoom-out { animation: zoom-out 1s; }\"\n      >\n        <div class=\"animation-title\">Zoom Out<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"flip\"\n        data-keyframe=\"@keyframes flip { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }\"\n        data-animation-class=\".flip { animation: flip 1s; }\"\n      >\n        <div class=\"animation-title\">Flip<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"heartbeat\"\n        data-keyframe=\"@keyframes heartbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }\"\n        data-animation-class=\".heartbeat { animation: heartbeat 1s; }\"\n      >\n        <div class=\"animation-title\">Heartbeat<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"jump\"\n        data-keyframe=\"@keyframes jump { 0% { transform: translateY(0); } 50% { transform: translateY(-30px); } 100% { transform: translateY(0); } }\"\n        data-animation-class=\".jump { animation: jump 1s; }\"\n      >\n        <div class=\"animation-title\">Jump<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"glow\"\n        data-keyframe=\"@keyframes glow { 0%, 100% { text-shadow: 0 0 5px rgba(255, 255, 255, 0); } 50% { text-shadow: 0 0 20px rgba(255, 255, 255, 1); } }\"\n        data-animation-class=\".glow { animation: glow 1s; }\"\n      >\n        <div class=\"animation-title\">Glow<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"wave\"\n        data-keyframe=\"@keyframes wave { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-10px); } 75% { transform: translateY(10px); } }\"\n        data-animation-class=\".wave { animation: wave 1s; }\"\n      >\n        <div class=\"animation-title\">Wave<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"roll-in\"\n        data-keyframe=\"@keyframes roll-in { from { transform: translateX(100%); } to { transform: translateX(0); } }\"\n        data-animation-class=\".roll-in { animation: roll-in 1s; }\"\n      >\n        <div class=\"animation-title\">Roll In<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"roll-out\"\n        data-keyframe=\"@keyframes roll-out { from { transform: translateX(0); } to { transform: translateX(100%); } }\"\n        data-animation-class=\".roll-out { animation: roll-out 1s; }\"\n      >\n        <div class=\"animation-title\">Roll Out<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"light-speed\"\n        data-keyframe=\"@keyframes light-speed { from { transform: scale(0); } to { transform: scale(1); } }\"\n        data-animation-class=\".light-speed { animation: light-speed 1s; }\"\n      >\n        <div class=\"animation-title\">Light Speed<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"zoom-in-right\"\n        data-keyframe=\"@keyframes zoom-in-right { from { transform: translateX(100%); scale(0); } to { transform: translateX(0); scale(1); } }\"\n        data-animation-class=\".zoom-in-right { animation: zoom-in-right 1s; }\"\n      >\n        <div class=\"animation-title\">Zoom In Right<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"zoom-in-left\"\n        data-keyframe=\"@keyframes zoom-in-left { from { transform: translateX(-100%); scale(0); } to { transform: translateX(0); scale(1); } }\"\n        data-animation-class=\".zoom-in-left { animation: zoom-in-left 1s; }\"\n      >\n        <div class=\"animation-title\">Zoom In Left<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"rotate-in\"\n        data-keyframe=\"@keyframes rotate-in { from { transform: rotate(360deg); } to { transform: rotate(0); } }\"\n        data-animation-class=\".rotate-in { animation: rotate-in 1s; }\"\n      >\n        <div class=\"animation-title\">Rotate In<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"rotate-out\"\n        data-keyframe=\"@keyframes rotate-out { from { transform: rotate(0); } to { transform: rotate(360deg); } }\"\n        data-animation-class=\".rotate-out { animation: rotate-out 1s; }\"\n      >\n        <div class=\"animation-title\">Rotate Out<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"fade-out\"\n        data-keyframe=\"@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }\"\n        data-animation-class=\".fade-out { animation: fade-out 1s; }\"\n      >\n        <div class=\"animation-title\">Fade Out<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"swing-in\"\n        data-keyframe=\"@keyframes swing-in { from { transform: rotate(30deg); } to { transform: rotate(0); } }\"\n        data-animation-class=\".swing-in { animation: swing-in 1s; }\"\n      >\n        <div class=\"animation-title\">Swing In<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"slide-up\"\n        data-keyframe=\"@keyframes slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }\"\n        data-animation-class=\".slide-up { animation: slide-up 1s; }\"\n      >\n        <div class=\"animation-title\">Slide Up<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"slide-down\"\n        data-keyframe=\"@keyframes slide-down { from { transform: translateY(-100%); } to { transform: translateY(0); } }\"\n        data-animation-class=\".slide-down { animation: slide-down 1s; }\"\n      >\n        <div class=\"animation-title\">Slide Down<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"fade-up\"\n        data-keyframe=\"@keyframes fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }\"\n        data-animation-class=\".fade-up { animation: fade-up 1s; }\"\n      >\n        <div class=\"animation-title\">Fade Up<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"fade-down\"\n        data-keyframe=\"@keyframes fade-down { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }\"\n        data-animation-class=\".fade-down { animation: fade-down 1s; }\"\n      >\n        <div class=\"animation-title\">Fade Down<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"light-bounce\"\n        data-keyframe=\"@keyframes light-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }\"\n        data-animation-class=\".light-bounce { animation: light-bounce 1s; }\"\n      >\n        <div class=\"animation-title\">Light Bounce<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"glide\"\n        data-keyframe=\"@keyframes glide { from { transform: translateX(0); } to { transform: translateX(20px); } }\"\n        data-animation-class=\".glide { animation: glide 1s; }\"\n      >\n        <div class=\"animation-title\">Glide<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"vibrate\"\n        data-keyframe=\"@keyframes vibrate { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 50% { transform: translateX(2px); } 75% { transform: translateX(-2px); } }\"\n        data-animation-class=\".vibrate { animation: vibrate 1s; }\"\n      >\n        <div class=\"animation-title\">Vibrate<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"dance\"\n        data-keyframe=\"@keyframes dance { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-10px); } 50% { transform: translateY(10px); } }\"\n        data-animation-class=\".dance { animation: dance 1s; }\"\n      >\n        <div class=\"animation-title\">Dance<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"jelly\"\n        data-keyframe=\"@keyframes jelly { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }\"\n        data-animation-class=\".jelly { animation: jelly 1s; }\"\n      >\n        <div class=\"animation-title\">Jelly<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"shake\"\n        data-keyframe=\"@keyframes shake { 0%, 100% { transform: translateX(0); } 25%, 75% { transform: translateX(-10px); } 50% { transform: translateX(10px); } }\"\n        data-animation-class=\".shake { animation: shake 1s; }\"\n      >\n        <div class=\"animation-title\">Shake<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"pulse\"\n        data-keyframe=\"@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }\"\n        data-animation-class=\".pulse { animation: pulse 1s; }\"\n      >\n        <div class=\"animation-title\">Pulse<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"wobble\"\n        data-keyframe=\"@keyframes wobble { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-10px) rotate(-5deg); } 50% { transform: translateX(10px) rotate(5deg); } 75% { transform: translateX(-5px) rotate(-2deg); } }\"\n        data-animation-class=\".wobble { animation: wobble 1s; }\"\n      >\n        <div class=\"animation-title\">Wobble<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"swing\"\n        data-keyframe=\"@keyframes swing { 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } }\"\n        data-animation-class=\".swing { animation: swing 1s; }\"\n      >\n        <div class=\"animation-title\">Swing<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"flash\"\n        data-keyframe=\"@keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } }\"\n        data-animation-class=\".flash { animation: flash 1s; }\"\n      >\n        <div class=\"animation-title\">Flash<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"rubberBand\"\n        data-keyframe=\"@keyframes rubberBand { 0% { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } 100% { transform: scale3d(1, 1, 1); } }\"\n        data-animation-class=\".rubberBand { animation: rubberBand 1s; }\"\n      >\n        <div class=\"animation-title\">Rubber Band<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"rotate-in\"\n        data-keyframe=\"@keyframes rotate-in { from { transform: rotate(360deg); } to { transform: rotate(0); } }\"\n        data-animation-class=\".rotate-in { animation: rotate-in 1s; }\"\n      >\n        <div class=\"animation-title\">Rotate In<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"rotate-out\"\n        data-keyframe=\"@keyframes rotate-out { from { transform: rotate(0); } to { transform: rotate(360deg); } }\"\n        data-animation-class=\".rotate-out { animation: rotate-out 1s; }\"\n      >\n        <div class=\"animation-title\">Rotate Out<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"fade-out\"\n        data-keyframe=\"@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }\"\n        data-animation-class=\".fade-out { animation: fade-out 1s; }\"\n      >\n        <div class=\"animation-title\">Fade Out<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"swing-in\"\n        data-keyframe=\"@keyframes swing-in { from { transform: rotate(30deg); } to { transform: rotate(0); } }\"\n        data-animation-class=\".swing-in { animation: swing-in 1s; }\"\n      >\n        <div class=\"animation-title\">Swing In<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"light-speed\"\n        data-keyframe=\"@keyframes light-speed { from { transform: scale(0); } to { transform: scale(1); } }\"\n        data-animation-class=\".light-speed { animation: light-speed 1s; }\"\n      >\n        <div class=\"animation-title\">Light Speed<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"slide-in-blur\"\n        data-keyframe=\"@keyframes slide-in-blur { from { transform: translateX(-100%); filter: blur(10px); opacity: 0; } to { transform: translateX(0); filter: blur(0); opacity: 1; } }\"\n        data-animation-class=\".slide-in-blur { animation: slide-in-blur 1s ease-out; }\"\n      >\n        <div class=\"animation-title\">Slide In Blur<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"flip-scale\"\n        data-keyframe=\"@keyframes flip-scale { from { transform: scale(0) rotateX(90deg); } to { transform: scale(1) rotateX(0); } }\"\n        data-animation-class=\".flip-scale { animation: flip-scale 1s ease-in-out; }\"\n      >\n        <div class=\"animation-title\">Flip Scale<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"rotate-blur\"\n        data-keyframe=\"@keyframes rotate-blur { from { transform: rotate(0); filter: blur(5px); opacity: 0; } to { transform: rotate(360deg); filter: blur(0); opacity: 1; } }\"\n        data-animation-class=\".rotate-blur { animation: rotate-blur 1.5s linear; }\"\n      >\n        <div class=\"animation-title\">Rotate Blur<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"skew-in\"\n        data-keyframe=\"@keyframes skew-in { from { transform: skewX(-45deg); opacity: 0; } to { transform: skewX(0); opacity: 1; } }\"\n        data-animation-class=\".skew-in { animation: skew-in 0.8s ease-in; }\"\n      >\n        <div class=\"animation-title\">Skew In<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"zoom-bounce\"\n        data-keyframe=\"@keyframes zoom-bounce { 0% { transform: scale(0.5); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }\"\n        data-animation-class=\".zoom-bounce { animation: zoom-bounce 1s ease-out; }\"\n      >\n        <div class=\"animation-title\">Zoom Bounce<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"pop-in\"\n        data-keyframe=\"@keyframes pop-in { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }\"\n        data-animation-class=\".pop-in { animation: pop-in 0.7s ease-in-out; }\"\n      >\n        <div class=\"animation-title\">Pop In<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"roll-spin\"\n        data-keyframe=\"@keyframes roll-spin { 0% { transform: rotateX(0deg); } 100% { transform: rotateX(360deg); } }\"\n        data-animation-class=\".roll-spin { animation: roll-spin 1.5s ease-in-out infinite; }\"\n      >\n        <div class=\"animation-title\">Roll Spin<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"shrink-grow\"\n        data-keyframe=\"@keyframes shrink-grow { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.8); } }\"\n        data-animation-class=\".shrink-grow { animation: shrink-grow 0.8s ease-in-out; }\"\n      >\n        <div class=\"animation-title\">Shrink Grow<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"zigzag\"\n        data-keyframe=\"@keyframes zigzag { 0% { transform: translateX(0); } 25% { transform: translateX(-10px); } 50% { transform: translateX(10px); } 75% { transform: translateX(-10px); } 100% { transform: translateX(0); } }\"\n        data-animation-class=\".zigzag { animation: zigzag 1s ease-in-out; }\"\n      >\n        <div class=\"animation-title\">Zigzag<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <div\n        class=\"animation-box\"\n        data-animation=\"fade-up-rotate\"\n        data-keyframe=\"@keyframes fade-up-rotate { 0% { opacity: 0; transform: translateY(20px) rotate(-10deg); } 100% { opacity: 1; transform: translateY(0) rotate(0deg); } }\"\n        data-animation-class=\".fade-up-rotate { animation: fade-up-rotate 1s ease-out; }\"\n      >\n        <div class=\"animation-title\">Fade Up Rotate<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Blur In -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"blur-in\"\n        data-keyframe=\"@keyframes blur-in { from { filter: blur(10px); opacity: 0; } to { filter: blur(0); opacity: 1; } }\"\n        data-animation-class=\".blur-in { animation: blur-in 1s ease-in-out; }\"\n      >\n        <div class=\"animation-title\">Blur In<\/div>\n        <div class=\"output\">\ud83d\ude0e<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Stretch In -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"stretch-in\"\n        data-keyframe=\"@keyframes stretch-in { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }\"\n        data-animation-class=\".stretch-in { animation: stretch-in 1s ease-in-out; }\"\n      >\n        <div class=\"animation-title\">Stretch In<\/div>\n        <div class=\"output\">\ud83d\ude04<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Tilt -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"tilt\"\n        data-keyframe=\"@keyframes tilt { 0% { transform: rotate(0deg); } 50% { transform: rotate(15deg); } 100% { transform: rotate(0deg); } }\"\n        data-animation-class=\".tilt { animation: tilt 1s ease-in-out; }\"\n      >\n        <div class=\"animation-title\">Tilt<\/div>\n        <div class=\"output\">\ud83d\ude0f<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Drift In -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"drift-in\"\n        data-keyframe=\"@keyframes drift-in { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }\"\n        data-animation-class=\".drift-in { animation: drift-in 1s ease-in-out; }\"\n      >\n        <div class=\"animation-title\">Drift In<\/div>\n        <div class=\"output\">\ud83d\ude0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Spiral In -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"spiral-in\"\n        data-keyframe=\"@keyframes spiral-in { from { transform: rotate(0deg) scale(0); opacity: 0; } to { transform: rotate(360deg) scale(1); opacity: 1; } }\"\n        data-animation-class=\".spiral-in { animation: spiral-in 1s ease-in-out; }\"\n      >\n        <div class=\"animation-title\">Spiral In<\/div>\n        <div class=\"output\">\ud83c\udf00<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Flip Diagonal -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"flip-diagonal\"\n        data-keyframe=\"@keyframes flip-diagonal { from { transform: rotate3d(1, 1, 0, -360deg); opacity: 0; } to { transform: rotate3d(1, 1, 0, 0deg); opacity: 1; } }\"\n        data-animation-class=\".flip-diagonal { animation: flip-diagonal 1s ease-in-out; }\"\n      >\n        <div class=\"animation-title\">Flip Diagonal<\/div>\n        <div class=\"output\">\ud83e\udd29<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Pop Up -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"pop-up\"\n        data-keyframe=\"@keyframes pop-up { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }\"\n        data-animation-class=\".pop-up { animation: pop-up 1s ease-in-out; }\"\n      >\n        <div class=\"animation-title\">Pop Up<\/div>\n        <div class=\"output\">\ud83c\udf89<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Shrink -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"shrink\"\n        data-keyframe=\"@keyframes shrink { from { transform: scale(1); } to { transform: scale(0.8); } }\"\n        data-animation-class=\".shrink { animation: shrink 0.5s ease-in-out; }\"\n      >\n        <div class=\"animation-title\">Shrink<\/div>\n        <div class=\"output\">\ud83d\ude2e<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Twirl -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"twirl\"\n        data-keyframe=\"@keyframes twirl { from { transform: rotate(0deg); } to { transform: rotate(720deg); } }\"\n        data-animation-class=\".twirl { animation: twirl 2s ease-in-out; }\"\n      >\n        <div class=\"animation-title\">Twirl<\/div>\n        <div class=\"output\">\ud83c\udf00<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Squeeze -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"squeeze\"\n        data-keyframe=\"@keyframes squeeze { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.5); } }\"\n        data-animation-class=\".squeeze { animation: squeeze 1s ease-in-out; }\"\n      >\n        <div class=\"animation-title\">Squeeze<\/div>\n        <div class=\"output\">\ud83d\ude2c<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Fade Zoom -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"fade-zoom\"\n        data-keyframe=\"@keyframes fade-zoom { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }\"\n        data-animation-class=\".fade-zoom { animation: fade-zoom 1s ease-in-out; }\"\n      >\n        <div class=\"animation-title\">Fade Zoom<\/div>\n        <div class=\"output\">\ud83d\ude0e<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Flap -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"flap\"\n        data-keyframe=\"@keyframes flap { 0%, 100% { transform: perspective(400px) rotateX(0deg); } 50% { transform: perspective(400px) rotateX(-45deg); } }\"\n        data-animation-class=\".flap { animation: flap 1s ease-in-out; }\"\n      >\n        <div class=\"animation-title\">Flap<\/div>\n        <div class=\"output\">\ud83d\udca8<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Ripple -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"ripple\"\n        data-keyframe=\"@keyframes ripple { 0% { transform: scale(0.5); } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }\"\n        data-animation-class=\".ripple { animation: ripple 1s ease-in-out; }\"\n      >\n        <div class=\"animation-title\">Ripple<\/div>\n        <div class=\"output\">\ud83c\udf0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Roll Left -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"roll-left\"\n        data-keyframe=\"@keyframes roll-left { from { transform: rotate(0deg) translateX(100%); opacity: 0; } to { transform: rotate(-360deg) translateX(0); opacity: 1; } }\"\n        data-animation-class=\".roll-left { animation: roll-left 1s ease-in-out; }\"\n      >\n        <div class=\"animation-title\">Roll Left<\/div>\n        <div class=\"output\">\ud83c\udfa1<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Vibrate -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"vibrate\"\n        data-keyframe=\"@keyframes vibrate {\n        0%, 100% { transform: translateX(0); }\n        25% { transform: translateX(-2px); }\n        75% { transform: translateX(2px); }\n    }\"\n        data-animation-class=\".vibrate {\n        animation: vibrate 0.3s ease-in-out infinite;\n    }\"\n      >\n        <div class=\"animation-title\">Vibrate<\/div>\n        <div class=\"output\">\ud83d\ude1c<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Bounce Zoom -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"bounce-zoom\"\n        data-keyframe=\"@keyframes bounce-zoom {\n        0%, 100% { transform: scale(1); }\n        50% { transform: scale(1.2); }\n    }\"\n        data-animation-class=\".bounce-zoom {\n        animation: bounce-zoom 0.8s ease-in-out;\n    }\"\n      >\n        <div class=\"animation-title\">Bounce Zoom<\/div>\n        <div class=\"output\">\ud83e\udd13<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Glimmer -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"glimmer\"\n        data-keyframe=\"@keyframes glimmer {\n        0% { opacity: 0.3; }\n        50% { opacity: 1; }\n        100% { opacity: 0.3; }\n    }\"\n        data-animation-class=\".glimmer {\n        animation: glimmer 1.5s ease-in-out infinite;\n    }\"\n      >\n        <div class=\"animation-title\">Glimmer<\/div>\n        <div class=\"output\">\u2728<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Shake Rotate -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"shake-rotate\"\n        data-keyframe=\"@keyframes shake-rotate {\n        0% { transform: rotate(0deg); }\n        25% { transform: rotate(-10deg); }\n        50% { transform: rotate(10deg); }\n        75% { transform: rotate(-5deg); }\n        100% { transform: rotate(0deg); }\n    }\"\n        data-animation-class=\".shake-rotate {\n        animation: shake-rotate 0.5s ease-in-out;\n    }\"\n      >\n        <div class=\"animation-title\">Shake Rotate<\/div>\n        <div class=\"output\">\ud83e\udd2f<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Fade Twist -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"fade-twist\"\n        data-keyframe=\"@keyframes fade-twist {\n        from { opacity: 0; transform: rotateY(90deg); }\n        to { opacity: 1; transform: rotateY(0deg); }\n    }\"\n        data-animation-class=\".fade-twist {\n        animation: fade-twist 1s ease-in-out;\n    }\"\n      >\n        <div class=\"animation-title\">Fade Twist<\/div>\n        <div class=\"output\">\ud83c\udf00<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Pulse Wave -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"pulse-wave\"\n        data-keyframe=\"@keyframes pulse-wave {\n        0% { transform: scale(1); }\n        50% { transform: scale(1.1); }\n        100% { transform: scale(1); }\n    }\"\n        data-animation-class=\".pulse-wave {\n        animation: pulse-wave 1s ease-in-out infinite;\n    }\"\n      >\n        <div class=\"animation-title\">Pulse Wave<\/div>\n        <div class=\"output\">\ud83c\udf1f<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Spiral Slide -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"spiral-slide\"\n        data-keyframe=\"@keyframes spiral-slide { 0% { transform: translateX(-100%) rotate(0deg); } 100% { transform: translateX(0) rotate(360deg); } }\"\n        data-animation-class=\".spiral-slide { animation: spiral-slide 1.5s ease-in-out; }\"\n      >\n        <div class=\"animation-title\">Spiral Slide<\/div>\n        <div class=\"output\">\ud83c\udf00<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Stretch In -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"stretch-in\"\n        data-keyframe=\"@keyframes stretch-in { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }\"\n        data-animation-class=\".stretch-in { animation: stretch-in 0.8s ease-out; }\"\n      >\n        <div class=\"animation-title\">Stretch In<\/div>\n        <div class=\"output\">\ud83d\ude32<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Flip Pulse -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"flip-pulse\"\n        data-keyframe=\"@keyframes flip-pulse { 0% { transform: rotateY(0); scale(1); } 50% { transform: rotateY(180deg); scale(1.1); } 100% { transform: rotateY(360deg); scale(1); } }\"\n        data-animation-class=\".flip-pulse { animation: flip-pulse 1s ease-in-out infinite; }\"\n      >\n        <div class=\"animation-title\">Flip Pulse<\/div>\n        <div class=\"output\">\ud83d\ude0e<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Fade Scale -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"fade-scale\"\n        data-keyframe=\"@keyframes fade-scale { 0% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } }\"\n        data-animation-class=\".fade-scale { animation: fade-scale 1s ease-in-out; }\"\n      >\n        <div class=\"animation-title\">Fade Scale<\/div>\n        <div class=\"output\">\ud83e\uddd1\u200d\ud83d\udcbb<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Swirl In -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"swirl-in\"\n        data-keyframe=\"@keyframes swirl-in { 0% { transform: rotate(0) scale(0); opacity: 0; } 100% { transform: rotate(360deg) scale(1); opacity: 1; } }\"\n        data-animation-class=\".swirl-in { animation: swirl-in 1.2s ease-in-out; }\"\n      >\n        <div class=\"animation-title\">Swirl In<\/div>\n        <div class=\"output\">\ud83c\udf2a\ufe0f<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Step Slide -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"step-slide\"\n        data-keyframe=\"@keyframes step-slide { 0% { transform: translateX(0); } 25% { transform: translateX(25%); } 50% { transform: translateX(50%); } 75% { transform: translateX(75%); } 100% { transform: translateX(100%); } }\"\n        data-animation-class=\".step-slide { animation: step-slide 2s ease-in-out; }\"\n      >\n        <div class=\"animation-title\">Step Slide<\/div>\n        <div class=\"output\">\ud83d\udeb6\u200d\u2642\ufe0f<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Blinking Glow -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"blinking-glow\"\n        data-keyframe=\"@keyframes blinking-glow { 0%, 100% { opacity: 1; box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); } 50% { opacity: 0.5; box-shadow: 0 0 20px rgba(255, 255, 255, 1); } }\"\n        data-animation-class=\".blinking-glow { animation: blinking-glow 1.5s ease-in-out infinite; }\"\n      >\n        <div class=\"animation-title\">Blinking Glow<\/div>\n        <div class=\"output\">\ud83d\udca1<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Elastic Bounce -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"elastic-bounce\"\n        data-keyframe=\"@keyframes elastic-bounce { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }\"\n        data-animation-class=\".elastic-bounce { animation: elastic-bounce 1s ease-in-out infinite; }\"\n      >\n        <div class=\"animation-title\">Elastic Bounce<\/div>\n        <div class=\"output\">\ud83e\udd38\u200d\u2642\ufe0f<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Wave Pulse -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"wave-pulse\"\n        data-keyframe=\"@keyframes wave-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }\"\n        data-animation-class=\".wave-pulse { animation: wave-pulse 1.2s ease-in-out infinite; }\"\n      >\n        <div class=\"animation-title\">Wave Pulse<\/div>\n        <div class=\"output\">\ud83c\udf0a<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Fade Left -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"fade-left\"\n        data-keyframe=\"@keyframes fade-left { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } }\"\n        data-animation-class=\".fade-left { animation: fade-left 1s ease-in-out; }\"\n      >\n        <div class=\"animation-title\">Fade Left<\/div>\n        <div class=\"output\">\ud83d\udc48<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Vertical Slide -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"vertical-slide\"\n        data-keyframe=\"@keyframes vertical-slide { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } }\"\n        data-animation-class=\".vertical-slide { animation: vertical-slide 0.8s ease-in-out infinite; }\"\n      >\n        <div class=\"animation-title\">Vertical Slide<\/div>\n        <div class=\"output\">\ud83c\udfc4\u200d\u2642\ufe0f<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Spin Stretch -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"spin-stretch\"\n        data-keyframe=\"@keyframes spin-stretch { 0% { transform: rotate(0deg) scale(0.8); } 100% { transform: rotate(360deg) scale(1); } }\"\n        data-animation-class=\".spin-stretch { animation: spin-stretch 1s ease-in-out; }\"\n      >\n        <div class=\"animation-title\">Spin Stretch<\/div>\n        <div class=\"output\">\ud83c\udf00<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Tilt In -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"tilt-in\"\n        data-keyframe=\"@keyframes tilt-in { 0% { transform: rotate(-30deg) scale(0); opacity: 0; } 100% { transform: rotate(0) scale(1); opacity: 1; } }\"\n        data-animation-class=\".tilt-in { animation: tilt-in 1s ease-in-out; }\"\n      >\n        <div class=\"animation-title\">Tilt In<\/div>\n        <div class=\"output\">\ud83c\udfa9<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Floating Lift -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"floating-lift\"\n        data-keyframe=\"@keyframes floating-lift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }\"\n        data-animation-class=\".floating-lift { animation: floating-lift 2s ease-in-out infinite; }\"\n      >\n        <div class=\"animation-title\">Floating Lift<\/div>\n        <div class=\"output\">\ud83d\ude80<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Slide Fade -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"slide-fade\"\n        data-keyframe=\"@keyframes slide-fade { 0% { opacity: 0; transform: translateX(-50px); } 100% { opacity: 1; transform: translateX(0); } }\"\n        data-animation-class=\".slide-fade { animation: slide-fade 0.8s ease-in-out; }\"\n      >\n        <div class=\"animation-title\">Slide Fade<\/div>\n        <div class=\"output\">\ud83c\udf08<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Bounce In -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"bounce-in\"\n        data-keyframe=\"@keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }\"\n        data-animation-class=\".bounce-in { animation: bounce-in 0.5s ease-out; }\"\n      >\n        <div class=\"animation-title\">Bounce In<\/div>\n        <div class=\"output\">\ud83d\udc3b<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Rock and Roll -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"rock-and-roll\"\n        data-keyframe=\"@keyframes rock-and-roll { 0% { transform: rotate(0deg); } 50% { transform: rotate(10deg); } 100% { transform: rotate(-10deg); } }\"\n        data-animation-class=\".rock-and-roll { animation: rock-and-roll 0.8s ease-in-out infinite; }\"\n      >\n        <div class=\"animation-title\">Rock and Roll<\/div>\n        <div class=\"output\">\ud83c\udfb8<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Shadow Lift -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"shadow-lift\"\n        data-keyframe=\"@keyframes shadow-lift { 0% { box-shadow: 0 0 0 rgba(0, 0, 0, 0.5); } 100% { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); } }\"\n        data-animation-class=\".shadow-lift { animation: shadow-lift 1s ease-in-out; }\"\n      >\n        <div class=\"animation-title\">Shadow Lift<\/div>\n        <div class=\"output\">\ud83c\udf1f<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Slide Out -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"slide-out\"\n        data-keyframe=\"@keyframes slide-out { 0% { transform: translateX(0); } 100% { transform: translateX(100%); opacity: 0; } }\"\n        data-animation-class=\".slide-out { animation: slide-out 0.8s ease-in-out; }\"\n      >\n        <div class=\"animation-title\">Slide Out<\/div>\n        <div class=\"output\">\ud83d\udeaa<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- Twirl -->\n      <div\n        class=\"animation-box\"\n        data-animation=\"twirl\"\n        data-keyframe=\"@keyframes twirl { 0% { transform: rotate(0deg); } 100% { transform: rotate(720deg); } }\"\n        data-animation-class=\".twirl { animation: twirl 1s ease-in-out; }\"\n      >\n        <div class=\"animation-title\">Twirl<\/div>\n        <div class=\"output\">\ud83c\udfa1<\/div>\n        <button class=\"trigger-btn\">Trigger Animation<\/button>\n        <button class=\"copy-btn\">Copy CSS<\/button>\n        <div class=\"copy-notification\">Copied!<\/div>\n      <\/div>\n\n      <!-- More animation boxes as needed -->\n    <\/div>\n\n\n\n<script>\n      \/\/ Function to trigger animation\n      document.querySelectorAll(\".trigger-btn\").forEach((button) => {\n        button.addEventListener(\"click\", function () {\n          const animationBox = this.closest(\".animation-box\");\n          const output = animationBox.querySelector(\".output\");\n          const animation = animationBox.dataset.animation;\n          output.classList.remove(animation); \/\/ Reset animation\n          void output.offsetWidth; \/\/ Trigger reflow to restart animation\n          output.classList.add(animation);\n        });\n      });\n\n      \/\/ Function to copy CSS\n      document.querySelectorAll(\".copy-btn\").forEach((button) => {\n        button.addEventListener(\"click\", function () {\n          const animationBox = this.closest(\".animation-box\");\n          const keyframe = animationBox.getAttribute(\"data-keyframe\");\n          const animationClass = animationBox.getAttribute(\n            \"data-animation-class\"\n          );\n\n          \/\/ Combine both keyframe and animation class\n          const cssToCopy = `${keyframe}\\n\\n${animationClass}`;\n\n          \/\/ Create a temporary textarea to copy the content\n          const tempTextarea = document.createElement(\"textarea\");\n          tempTextarea.value = cssToCopy;\n          document.body.appendChild(tempTextarea);\n          tempTextarea.select();\n          document.execCommand(\"copy\");\n          document.body.removeChild(tempTextarea);\n\n          \/\/ Show notification that CSS was copied\n          const notification = animationBox.querySelector(\".copy-notification\");\n          notification.style.display = \"block\";\n            setTimeout(() => {\n              notification.style.display = \"none\";\n            }, 2000);\n        });\n      });\n    <\/script>\n","protected":false},"excerpt":{"rendered":"<p>Fade In \ud83d\ude0a Trigger Animation Copy CSS Copied! Slide Left \ud83d\ude0a Trigger Animation Copy CSS Copied! Slide Right \ud83d\ude0a Trigger Animation Copy CSS Copied! Bounce \ud83d\ude0a Trigger Animation Copy CSS Copied! Zoom In \ud83d\ude0a Trigger Animation Copy CSS Copied! Zoom Out \ud83d\ude0a Trigger Animation Copy CSS Copied! Flip \ud83d\ude0a Trigger Animation Copy CSS Copied! Heartbeat&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-2123","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/getrizwan.com\/ecom\/wp-json\/wp\/v2\/pages\/2123","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getrizwan.com\/ecom\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/getrizwan.com\/ecom\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/getrizwan.com\/ecom\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/getrizwan.com\/ecom\/wp-json\/wp\/v2\/comments?post=2123"}],"version-history":[{"count":0,"href":"https:\/\/getrizwan.com\/ecom\/wp-json\/wp\/v2\/pages\/2123\/revisions"}],"wp:attachment":[{"href":"https:\/\/getrizwan.com\/ecom\/wp-json\/wp\/v2\/media?parent=2123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}