text-animations-react
Version:
A React.js and typescript package that lets you animates text and add text effects with ease with ease
3 lines (2 loc) • 20.9 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var n,r=(n=require("react"))&&"object"==typeof n&&"default"in n?n.default:n;function e(n,r){void 0===r&&(r={});var e=r.insertAt;if(n&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===e&&t.firstChild?t.insertBefore(a,t.firstChild):t.appendChild(a),a.styleSheet?a.styleSheet.cssText=n:a.appendChild(document.createTextNode(n))}}e(".animated {\r\n animation-fill-mode: both;\r\n }\r\n .parentbox {\r\n width: fit-content;\r\n height: fit-content;\r\n }\r\n \r\n .add3d{\r\n text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc, 0 4px 0 #ccc,\r\n 0 5px 0 #ccc, 0 6px 0 transparent, 0 7px 0 transparent, 0 8px 0 transparent,\r\n 0 9px 0 transparent, 0 10px 10px rgba(0, 0, 0, 0.4);\r\n }\r\n .bounceone {\r\n animation-name: bounceone;\r\n }\r\n .reveal {\r\n animation-name: reveal;\r\n }\r\n .pulse {\r\n animation-name: pulse;\r\n animation-duration: 1s;\r\n }\r\n .rubberband {\r\n animation-name: rubberband;\r\n }\r\n .shake {\r\n animation-name: shake;\r\n }\r\n .wobble {\r\n animation-name: wobble;\r\n }\r\n .animated.flip {\r\n backface-visibility: visible;\r\n animation-name: flip;\r\n }\r\n .lightspeed {\r\n animation-name: lightspeed;\r\n animation-timing-function: ease-out;\r\n }\r\n .rollin {\r\n animation-name: rollin;\r\n }\r\n .rotatein {\r\n animation-name: rotatein;\r\n }\r\n .hinge {\r\n margin: 20px;\r\n animation-name: hinge;\r\n }\r\n \r\n .shadows {\r\n font-family: bungee, sans-serif;\r\n font-weight: 400;\r\n \r\n animation: shadows 1.2s ease-in infinite, move 1.2s ease-in infinite;\r\n letter-spacing: 0.4rem;\r\n }\r\n \r\n .gradientone {\r\n background-size: auto auto;\r\n background-clip: border-box;\r\n background-size: 200% auto;\r\n color:#fff;\r\n background-clip: text;\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n animation: gradientone linear;\r\n display: inline-block;\r\n }\r\n .flipvertical {\r\n animation: flipvertical ease ;\r\n }\r\n .goup {\r\n animation: goup ease-out;\r\n }\r\n .fromtop {\r\n animation: fromtop linear ;\r\n }\r\n .popoutin {\r\n animation: 2s popoutin ease infinite;\r\n }\r\n \r\n .glitchhop {\r\n animation: glitchhop 1.5s ease-in-out infinite;\r\n font-weight: 900;\r\n }\r\n \r\n /*keyframes*/ \r\n \r\n /*bounceone*/\r\n @keyframes bounceone {\r\n 0%,\r\n 20%,\r\n 50%,\r\n 80%,\r\n 100% {\r\n transform: translateY(0);\r\n }\r\n 40% {\r\n transform: translateY(-30px);\r\n }\r\n 60% {\r\n transform: translateY(-15px);\r\n }\r\n }\r\n /*reveal*/\r\n @keyframes reveal {\r\n 0%,\r\n 50%,\r\n 100% {\r\n opacity: 1;\r\n }\r\n 25%,\r\n 75% {\r\n opacity: 0;\r\n }\r\n }\r\n /*pulse*/ \r\n @keyframes pulse {\r\n 0% {\r\n transform: scale(1);\r\n }\r\n 50% {\r\n transform: scale(1.1);\r\n }\r\n 100% {\r\n transform: scale(1);\r\n }\r\n }\r\n /*rubberband*/\r\n @keyframes rubberband {\r\n 0% {\r\n transform: scale(1);\r\n }\r\n 30% {\r\n transform: scaleX(1.25) scaleY(0.75);\r\n }\r\n 40% {\r\n transform: scaleX(0.75) scaleY(1.25);\r\n }\r\n 60% {\r\n transform: scaleX(1.15) scaleY(0.85);\r\n }\r\n 100% {\r\n transform: scale(1);\r\n }\r\n }\r\n /*shake*/ \r\n @keyframes shake {\r\n 0%,\r\n 100% {\r\n transform: translateX(0);\r\n }\r\n 10%,\r\n 30%,\r\n 50%,\r\n 70%,\r\n 90% {\r\n transform: translateX(-10px);\r\n }\r\n 20%,\r\n 40%,\r\n 60%,\r\n 80% {\r\n transform: translateX(10px);\r\n }\r\n }\r\n /*swing*/\r\n @keyframes swing {\r\n 20% {\r\n transform: rotate(15deg);\r\n }\r\n 40% {\r\n transform: rotate(-10deg);\r\n }\r\n 60% {\r\n transform: rotate(5deg);\r\n }\r\n 80% {\r\n transform: rotate(-5deg);\r\n }\r\n 100% {\r\n transform: rotate(0deg);\r\n }\r\n }\r\n .swing {\r\n transform-origin: top center;\r\n animation-name: swing;\r\n }\r\n /*wobble*/\r\n @keyframes wobble {\r\n 0% {\r\n transform: translateX(0%);\r\n }\r\n 15% {\r\n transform: translateX(-25%) rotate(-5deg);\r\n }\r\n 30% {\r\n transform: translateX(20%) rotate(3deg);\r\n }\r\n 45% {\r\n transform: translateX(-15%) rotate(-3deg);\r\n }\r\n 60% {\r\n transform: translateX(10%) rotate(2deg);\r\n }\r\n 75% {\r\n transform: translateX(-5%) rotate(-1deg);\r\n }\r\n 100% {\r\n transform: translateX(0%);\r\n }\r\n }\r\n /*flip*/ \r\n @keyframes flip {\r\n 0% {\r\n transform: perspective(400px) translateZ(0) rotateY(0) scale(1);\r\n animation-timing-function: ease-out;\r\n }\r\n 40% {\r\n transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);\r\n animation-timing-function: ease-out;\r\n }\r\n 50% {\r\n transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);\r\n animation-timing-function: ease-in;\r\n }\r\n 80% {\r\n transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);\r\n animation-timing-function: ease-in;\r\n }\r\n 100% {\r\n transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);\r\n animation-timing-function: ease-in;\r\n }\r\n }\r\n /*lightspeed*/\r\n @keyframes lightspeed {\r\n 0% {\r\n transform: translateX(100%) skewX(-30deg);\r\n opacity: 0;\r\n }\r\n 60% {\r\n transform: translateX(-20%) skewX(30deg);\r\n opacity: 1;\r\n }\r\n 80% {\r\n transform: translateX(0%) skewX(-15deg);\r\n opacity: 1;\r\n }\r\n 100% {\r\n transform: translateX(0%) skewX(0deg);\r\n opacity: 1;\r\n }\r\n }\r\n \r\n /*rollin*/ \r\n @keyframes rollin {\r\n 0% {\r\n opacity: 0;\r\n transform: translateX(-100%) rotate(-120deg);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateX(0px) rotate(0deg);\r\n }\r\n }\r\n \r\n /*rotatein*/ \r\n @keyframes rotatein {\r\n 0% {\r\n transform-origin: center center;\r\n transform: rotate(-200deg);\r\n opacity: 0;\r\n }\r\n 100% {\r\n transform-origin: center center;\r\n transform: rotate(0);\r\n opacity: 1;\r\n }\r\n }\r\n \r\n /*hinge*/\r\n @keyframes hinge {\r\n 0% {\r\n transform: rotate(0);\r\n transform-origin: top left;\r\n animation-timing-function: ease-in-out;\r\n }\r\n 20%,\r\n 60% {\r\n transform: rotate(80deg);\r\n transform-origin: top left;\r\n animation-timing-function: ease-in-out;\r\n }\r\n 40% {\r\n transform: rotate(60deg);\r\n transform-origin: top left;\r\n animation-timing-function: ease-in-out;\r\n }\r\n 80% {\r\n transform: rotate(60deg) translateY(0);\r\n transform-origin: top left;\r\n animation-timing-function: ease-in-out;\r\n }\r\n 100% {\r\n transform: translateY(700px);\r\n }\r\n }\r\n \r\n /*gradientone*/\r\n @keyframes gradientone {\r\n to {\r\n background-position: 200% center;\r\n }\r\n }\r\n \r\n /*flipvertical*/\r\n @keyframes flipvertical {\r\n 0% {\r\n opacity: 0;\r\n transform: rotateX(90def);\r\n }\r\n 50% {\r\n opacity: 1;\r\n transform: rotateX(720deg);\r\n }\r\n 100% {\r\n /* animate nothing to pause animation at the end */\r\n opacity: 1;\r\n transform: rotateX(720deg);\r\n }\r\n }\r\n \r\n /*goup*/\r\n @keyframes goup {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(80%);\r\n }\r\n 20% {\r\n opacity: 0;\r\n }\r\n 50% {\r\n opacity: 1;\r\n transform: translateY(0%);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateY(0%);\r\n }\r\n }\r\n \r\n /*fromtop*/\r\n @keyframes fromtop {\r\n 0% { opacity: 0; transform: translateY(-100%);}\r\n 25% { opacity: 1; transform: translateY(0%);}\r\n 50% {\r\n }\r\n 100% {\r\n }\r\n }\r\n \r\n /*popoutin*/\r\n @keyframes popoutin {\r\n 0% {\r\n \r\n transform: scale(0);\r\n opacity: 0;\r\n text-shadow: 0 0 0 rgba(0, 0, 0, 0);\r\n }\r\n 25% {\r\n \r\n transform: scale(1.5);\r\n opacity: 1;\r\n text-shadow: 3px 10px 5px rgba(0, 0, 0, 0.5);\r\n }\r\n 50% {\r\n \r\n transform: scale(1);\r\n opacity: 1;\r\n text-shadow: 1px 0 0 rgba(0, 0, 0, 0);\r\n }\r\n 100% {\r\n /* animate nothing to add pause at the end of animation */\r\n transform: scale(1);\r\n opacity: 1;\r\n text-shadow: 1px 0 0 rgba(0, 0, 0, 0);\r\n }\r\n }\r\n \r\n \r\n \r\n /*shadows*/\r\n \r\n @keyframes shadows {\r\n 0% {\r\n text-shadow: none;\r\n }\r\n 10% {\r\n text-shadow: 3px 3px 0 ;\r\n }\r\n 20% {\r\n text-shadow: 3px 3px 0 ,\r\n 6px 6px 0 ;\r\n }\r\n 30% {\r\n text-shadow: 3px 3px 0 ,\r\n 6px 6px 0, 9px 9px ;\r\n }\r\n 40% {\r\n text-shadow: 3px 3px 0 ,\r\n 6px 6px 0 , 9px 9px ,\r\n 12px 12px 0 ;\r\n }\r\n 50% {\r\n text-shadow: 3px 3px 0 ,\r\n 6px 6px 0 , 9px 9px,\r\n 12px 12px 0 ;\r\n }\r\n 60% {\r\n text-shadow: 3px 3px 0 ,\r\n 6px 6px 0 , 9px 9px ,\r\n 12px 12px 0 ;\r\n }\r\n 70% {\r\n text-shadow: 3px 3px 0 ,\r\n 6px 6px 0 , 9px 9px ;\r\n }\r\n 80% {\r\n text-shadow: 3px 3px 0,\r\n 6px 6px 0 ;\r\n }\r\n 90% {\r\n text-shadow: 3px 3px 0 ;\r\n }\r\n 100% {\r\n text-shadow: none;\r\n }\r\n }\r\n \r\n @keyframes move {\r\n 0% {\r\n transform: translate(0px, 0px);\r\n }\r\n 40% {\r\n transform: translate(-12px, -12px);\r\n }\r\n 50% {\r\n transform: translate(-12px, -12px);\r\n }\r\n 60% {\r\n transform: translate(-12px, -12px);\r\n }\r\n 100% {\r\n transform: translate(0px, 0px);\r\n }\r\n }\r\n \r\n /*glitchhop*/\r\n \r\n @keyframes glitchhop {\r\n 0% { \r\n transform: translateY(0);\r\n text-shadow: \r\n 0 0 0 #0c2ffb, \r\n 0 0 0 #2cfcfd, \r\n 0 0 0 #fb203b, \r\n 0 0 0 #fefc4b;\r\n }\r\n \r\n 20% { \r\n transform: translateY(-1em);\r\n text-shadow: \r\n 0 0.125em 0 #0c2ffb, \r\n 0 0.25em 0 #2cfcfd, \r\n 0 -0.125em 0 #fb203b, \r\n 0 -0.25em 0 #fefc4b;\r\n }\r\n \r\n 40% { \r\n transform: translateY(0.5em);\r\n text-shadow: \r\n 0 -0.0625em 0 #0c2ffb, \r\n 0 -0.125em 0 #2cfcfd, \r\n 0 0.0625em 0 #fb203b, \r\n 0 0.125em 0 #fefc4b;\r\n }\r\n \r\n 60% {\r\n transform: translateY(-0.25em);\r\n text-shadow: \r\n 0 0.03125em 0 #0c2ffb, \r\n 0 0.0625em 0 #2cfcfd, \r\n 0 -0.03125em 0 #fb203b, \r\n 0 -0.0625em 0 #fefc4b;\r\n }\r\n \r\n 80% { \r\n transform: translateY(0);\r\n text-shadow: \r\n 0 0 0 #0c2ffb, \r\n 0 0 0 #2cfcfd, \r\n 0 0 0 #fb203b, \r\n 0 0 0 #fefc4b;\r\n }\r\n }\r\n "),e(".container {\r\n width: fit-content;\r\n height: fit-content;\r\n perspective: 1000px;\r\n color: transparent;\r\n backface-visibility: hidden;\r\n }\r\n \r\n .specialone {\r\n cursor: pointer;\r\n display: inline-block;\r\n user-select: none;\r\n line-height: 0.8;\r\n text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc, 0 4px 0 #ccc,\r\n 0 5px 0 #ccc, 0 6px 0 transparent, 0 7px 0 transparent, 0 8px 0 transparent,\r\n 0 9px 0 transparent, 0 10px 10px rgba(0, 0, 0, 0.4);\r\n }\r\n .specialone:nth-child(1) {\r\n animation: balance 1.5s ease-out;\r\n transform-origin: bottom left;\r\n }\r\n .specialone:nth-child(2) {\r\n animation: shrinkjump 1s ease-in-out;\r\n transform-origin: bottom center;\r\n }\r\n .specialone:nth-child(3) {\r\n animation: falling 2s ease-out;\r\n transform-origin: bottom center;\r\n }\r\n .specialone:nth-child(4) {\r\n animation: rotate 1s ease-out;\r\n }\r\n .specialone:nth-child(5) {\r\n animation: toplong 1.5s linear;\r\n }\r\n /*specialone ends here*/\r\n \r\n /*specialtwo*/\r\n .specialtwo {\r\n display: inline-block;\r\n text-shadow: 0 0 0 whitesmoke;\r\n animation: smoky 3s both;\r\n }\r\n .specialtwo:nth-child(even) {\r\n animation-name: smoky-mirror;\r\n }\r\n /*specialtwo ends here*/\r\n \r\n /*specialthree*/\r\n .specialthree {\r\n position: relative;\r\n top: 20px;\r\n display: inline-block;\r\n -webkit-animation: bounce 0.6s ease alternate;\r\n animation: bounce 1s ease alternate;\r\n text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc, 0 4px 0 #ccc,\r\n 0 5px 0 #ccc, 0 6px 0 transparent, 0 7px 0 transparent, 0 8px 0 transparent,\r\n 0 9px 0 transparent, 0 10px 10px rgba(0, 0, 0, 0.4);\r\n }\r\n .add3d {\r\n text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc, 0 4px 0 #ccc,\r\n 0 5px 0 #ccc, 0 6px 0 transparent, 0 7px 0 transparent, 0 8px 0 transparent,\r\n 0 9px 0 transparent, 0 10px 10px rgba(0, 0, 0, 0.4);\r\n }\r\n .specialthree:nth-child(2) {\r\n -webkit-animation-delay: 0.1s;\r\n animation-delay: 0.1s;\r\n }\r\n .specialthree:nth-child(3) {\r\n -webkit-animation-delay: 0.2s;\r\n animation-delay: 0.2s;\r\n }\r\n .specialthree:nth-child(4) {\r\n -webkit-animation-delay: 0.3s;\r\n animation-delay: 0.3s;\r\n }\r\n .specialthree:nth-child(5) {\r\n -webkit-animation-delay: 0.4s;\r\n animation-delay: 0.4s;\r\n }\r\n /*specialthree ends here*/\r\n \r\n /*specialfour*/\r\n .specialfour {\r\n display: inline-block;\r\n animation: flip 2s;\r\n }\r\n \r\n /*specialfour ends here*/\r\n\r\n /*specialseven ends here*/\r\n \r\n /*one*/\r\n .one {\r\n display: inline-block;\r\n opacity: 0;\r\n transform: translate(-150px, -50px) rotate(-180deg) scale(3);\r\n animation: revolveScale 2s forwards;\r\n }\r\n \r\n /*one ends here*/\r\n \r\n \r\n /*three*/\r\n \r\n .three {\r\n display: inline-block;\r\n \r\n opacity: 0;\r\n transform: translate(0, -100px) rotate(360deg) scale(0);\r\n animation: revolveDrop 3s forwards;\r\n }\r\n \r\n /*three ends here*/\r\n \r\n /*four*/\r\n .four {\r\n display: inline-block;\r\n \r\n opacity: 0;\r\n transform: translate(-150px, 0) scale(0.3);\r\n animation: leftRight 0.5s forwards;\r\n }\r\n /*four ends here */\r\n \r\n /*keyframe and animation*/\r\n \r\n /*specialone animations*/\r\n @keyframes balance {\r\n 0%,\r\n 100% {\r\n transform: rotate(0deg);\r\n }\r\n \r\n 30%,\r\n 60% {\r\n transform: rotate(-45deg);\r\n }\r\n }\r\n \r\n @keyframes shrinkjump {\r\n 10%,\r\n 35% {\r\n transform: scale(2, 0.2) translate(0, 0);\r\n }\r\n \r\n 45%,\r\n 50% {\r\n transform: scale(1) translate(0, -150px);\r\n }\r\n \r\n 80% {\r\n transform: scale(1) translate(0, 0);\r\n }\r\n }\r\n \r\n @keyframes falling {\r\n 12% {\r\n transform: rotateX(240deg);\r\n }\r\n \r\n 24% {\r\n transform: rotateX(150deg);\r\n }\r\n \r\n 36% {\r\n transform: rotateX(200deg);\r\n }\r\n \r\n 48% {\r\n transform: rotateX(175deg);\r\n }\r\n \r\n 60%,\r\n 85% {\r\n transform: rotateX(180deg);\r\n }\r\n \r\n 100% {\r\n transform: rotateX(0deg);\r\n }\r\n }\r\n @keyframes rotate {\r\n 20%,\r\n 80% {\r\n transform: rotateY(180deg);\r\n }\r\n \r\n 100% {\r\n transform: rotateY(360deg);\r\n }\r\n }\r\n @keyframes toplong {\r\n 10%,\r\n 40% {\r\n transform: translateY(-38vh) scaleY(1);\r\n }\r\n \r\n 90% {\r\n transform: translateY(-38vh) scaleY(4);\r\n }\r\n }\r\n \r\n /*specialtwo animations*/\r\n @keyframes smoky {\r\n 60% {\r\n text-shadow: 0 0 40px whitesmoke;\r\n }\r\n to {\r\n transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg)\r\n scale(1.5);\r\n text-shadow: 0 0 20px whitesmoke;\r\n opacity: 0;\r\n }\r\n }\r\n \r\n @keyframes smoky-mirror {\r\n 60% {\r\n text-shadow: 0 0 40px whitesmoke;\r\n }\r\n to {\r\n transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg)\r\n scale(2);\r\n text-shadow: 0 0 20px whitesmoke;\r\n opacity: 0;\r\n }\r\n }\r\n \r\n /*specialthree animations*/\r\n @-webkit-keyframes bounce {\r\n 100% {\r\n top: -20px;\r\n text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc, 0 4px 0 #ccc,\r\n 0 5px 0 #ccc, 0 6px 0 #ccc, 0 7px 0 #ccc, 0 8px 0 #ccc, 0 9px 0 #ccc,\r\n 0 50px 25px rgba(0, 0, 0, 0.2);\r\n }\r\n }\r\n \r\n @keyframes bounce {\r\n 100% {\r\n top: -20px;\r\n text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc, 0 4px 0 #ccc,\r\n 0 5px 0 #ccc, 0 6px 0 #ccc, 0 7px 0 #ccc, 0 8px 0 #ccc, 0 9px 0 #ccc,\r\n 0 50px 25px rgba(0, 0, 0, 0.2);\r\n }\r\n }\r\n /*specialfour animation*/\r\n @keyframes flip {\r\n 0%,\r\n 80% {\r\n transform: rotateY(360deg);\r\n }\r\n }\r\n \r\n /*specialsix animation*/\r\n @keyframes scaling {\r\n 20% {\r\n text-shadow: 0px 0 #e8332e, 0px 0 #fc9e05, 0px 0 #891696;\r\n transform: scale(0.9, 1) rotatey(-10deg);\r\n }\r\n 40% {\r\n transform: scale(0.9, 2) translatey(16px);\r\n text-shadow: -10px 0px #e8332e, -20px 0 #fc9e05, -30px 0 #891696;\r\n }\r\n 60% {\r\n transform: scale(0.9, 1) rotatey(-5deg);\r\n text-shadow: 0px 0 #e8332e, 0px 0 #fc9e05, 0px 0 #891696;\r\n }\r\n 80% {\r\n transform: scale(0.9, 2) translatey(16px);\r\n text-shadow: 10px 0px #e8332e, 20px 0 #fc9e05, 30px 0 #891696;\r\n }\r\n }\r\n \r\n @keyframes jump {\r\n 20% {\r\n transform: translatey(0) scale(0);\r\n opacity: 0;\r\n }\r\n 40% {\r\n transform: translatey(-50px) scale(1);\r\n opacity: 1;\r\n }\r\n 60% {\r\n transform: translatey(0) scale(0);\r\n opacity: 0;\r\n }\r\n 80% {\r\n transform: translatey(-50px) scale(1);\r\n opacity: 1;\r\n }\r\n }\r\n \r\n /*one animation*/\r\n @keyframes revolveScale {\r\n 60% {\r\n transform: translate(20px, 20px) rotate(30deg) scale(0.3);\r\n }\r\n \r\n 100% {\r\n transform: translate(0) rotate(0) scale(1);\r\n opacity: 1;\r\n }\r\n }\r\n \r\n /*three animation*/\r\n \r\n @keyframes revolveDrop {\r\n 30% {\r\n transform: translate(0, -50px) rotate(180deg) scale(1);\r\n }\r\n \r\n 60% {\r\n transform: translate(0, 20px) scale(0.8) rotate(0deg);\r\n }\r\n \r\n 100% {\r\n transform: translate(0) scale(1) rotate(0deg);\r\n opacity: 1;\r\n }\r\n }\r\n /*four animation*/\r\n @keyframes leftRight {\r\n 40% {\r\n transform: translate(50px, 0) scale(0.7);\r\n opacity: 1;\r\n color: #348c04;\r\n }\r\n \r\n 60% {\r\n color: #0f40ba;\r\n }\r\n \r\n 80% {\r\n transform: translate(0) scale(2);\r\n opacity: 0;\r\n }\r\n \r\n 100% {\r\n transform: translate(0) scale(1);\r\n opacity: 1;\r\n }\r\n }\r\n "),exports.Special=function(n){var e=n.type,t=n.count,a=n.color,o=n.size,s=n.delay,i=n.duration,c=n.top,p=n.right,m=n.left,l=n.bottom,f=Array.from(n.name).map((function(n){return r.createElement("span",{className:""+e,style:{animationIterationCount:t,animationDelay:s+"s",animationDuration:i+"s",color:a,fontSize:o+"rem",marginTop:c+"rem",marginRight:p+"rem",marginBottom:l+"rem",marginLeft:m+"rem"}},n)}));return r.createElement(r.Fragment,null,r.createElement("div",{className:"container"},f))},exports.TextAnim=function(n){var e=n.type;return r.createElement("div",null,r.createElement("div",{className:"parentbox"},r.createElement("div",{style:{color:n.color,animationDuration:n.duration+"s",animationIterationCount:n.count,fontSize:n.size+"rem",animationDelay:n.delay+"s",backgroundImage:"gradientone"===e?"linear-gradient(\n -225deg,\n "+n.grad1+" 0%,\n "+n.grad2+" 29%,\n "+n.grad3+" 67%,\n "+n.grad4+" 100%\n )":"none",marginTop:n.top+"rem",marginLeft:n.left+"rem",marginBottom:n.bottom+"rem",marginRight:n.right+"rem"},className:e+" animated"}," ",n.name)))};
//# sourceMappingURL=text-animations-react.cjs.production.min.js.map