text-animations-react
Version:
A React.js and typescript package that lets you animates text and add text effects with ease with ease
114 lines (100 loc) • 22.4 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = _interopDefault(require('react'));
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z = ".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 ";
styleInject(css_248z);
var TextAnim = function TextAnim(_ref) {
var color = _ref.color,
size = _ref.size,
type = _ref.type,
name = _ref.name,
delay = _ref.delay,
duration = _ref.duration,
count = _ref.count,
grad1 = _ref.grad1,
grad2 = _ref.grad2,
grad3 = _ref.grad3,
grad4 = _ref.grad4,
left = _ref.left,
right = _ref.right,
bottom = _ref.bottom,
top = _ref.top;
return React.createElement("div", null, React.createElement("div", {
className: "parentbox"
}, React.createElement("div", {
style: {
color: color,
animationDuration: duration + "s",
animationIterationCount: count,
fontSize: size + "rem",
animationDelay: delay + "s",
backgroundImage: type === 'gradientone' ? "linear-gradient(\n -225deg,\n " + grad1 + " 0%,\n " + grad2 + " 29%,\n " + grad3 + " 67%,\n " + grad4 + " 100%\n )" : 'none',
marginTop: top + "rem",
marginLeft: left + "rem",
marginBottom: bottom + "rem",
marginRight: right + "rem"
},
className: type + " animated"
}, ' ', name)));
};
var css_248z$1 = ".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 ";
styleInject(css_248z$1);
var Special = function Special(_ref) {
var name = _ref.name,
type = _ref.type,
count = _ref.count,
color = _ref.color,
size = _ref.size,
delay = _ref.delay,
duration = _ref.duration,
top = _ref.top,
right = _ref.right,
left = _ref.left,
bottom = _ref.bottom;
var input = Array.from(name);
var myspan = input.map(function (inputs) {
return React.createElement("span", {
className: "" + type,
style: {
animationIterationCount: count,
animationDelay: delay + "s",
animationDuration: duration + "s",
color: color,
fontSize: size + "rem",
marginTop: top + "rem",
marginRight: right + "rem",
marginBottom: bottom + "rem",
marginLeft: left + "rem"
}
}, inputs);
});
return React.createElement(React.Fragment, null, React.createElement("div", {
className: "container"
}, myspan));
};
exports.Special = Special;
exports.TextAnim = TextAnim;
//# sourceMappingURL=text-animations-react.cjs.development.js.map