animated-unocss
Version:
A configuration to use Animate.css with UnoCSS.
940 lines (931 loc) • 32.8 kB
JavaScript
;
const utils = require('@unocss/preset-mini/utils');
const bounce = {
animationName: "uneBounce",
css: {
"animation-name": "uneBounce",
"transform-origin": "center bottom"
},
keyframes: "0%,20%,53%,to { animation-timing-function: cubic-bezier(.215,.61,.355,1); transform: translateZ(0) } 40%,43% { transform: translate3d(0,-30px,0) scaleY(1.1) } 40%,43%,70% { animation-timing-function: cubic-bezier(.755,.05,.855,.06) } 70% { transform: translate3d(0,-15px,0) scaleY(1.05) } 80% { transform: translateZ(0) scaleY(.95); transition-timing-function: cubic-bezier(.215,.61,.355,1) } 90% { transform: translate3d(0,-4px,0) scaleY(1.02) }"
};
const flash = {
animationName: "uneFlash",
css: {
"animation-name": "uneFlash"
},
keyframes: "0%,50%,to { opacity: 1 } 25%,75% { opacity: 0 }"
};
const jello = {
animationName: "uneJello",
css: {
"animation-name": "uneJello",
"transform-origin": "center"
},
keyframes: "0%,11.1%,to { transform: translateZ(0) } 22.2% { transform: skewX(-12.5deg) skewY(-12.5deg) } 33.3% { transform: skewX(6.25deg) skewY(6.25deg) } 44.4% { transform: skewX(-3.125deg) skewY(-3.125deg) } 55.5% { transform: skewX(1.5625deg) skewY(1.5625deg) } 66.6% { transform: skewX(-.78125deg) skewY(-.78125deg) } 77.7% { transform: skewX(.390625deg) skewY(.390625deg) } 88.8% { transform: skewX(-.1953125deg) skewY(-.1953125deg) }"
};
const pulse = {
animationName: "unePulse",
css: {
"animation-name": "unePulse",
"animation-timing-function": "ease-in-out"
},
keyframes: "0% { transform: scaleX(1) } 50% { transform: scale3d(1.05,1.05,1.05) } to { transform: scaleX(1) }"
};
const shake = {
animationName: "uneShake",
css: {
"animation-name": "uneShake"
},
keyframes: "0%,to { transform: translateZ(0) } 10%,30%,50%,70%,90% { transform: translate3d(-10px,0,0) } 20%,40%,60%,80% { transform: translate3d(10px,0,0) }"
};
const swing = {
animationName: "uneSwing",
css: {
"transform-origin": "top center",
"animation-name": "uneSwing"
},
keyframes: "20% { transform: rotate(15deg) } 40% { transform: rotate(-10deg) } 60% { transform: rotate(5deg) } 80% { transform: rotate(-5deg) } to { transform: rotate(0deg) }"
};
const tada = {
animationName: "uneTada",
css: {
"animation-name": "uneTada"
},
keyframes: "0% { transform: scaleX(1) } 10%,20% { transform: scale3d(.9,.9,.9) rotate(-3deg) } 30%,50%,70%,90% { transform: scale3d(1.1,1.1,1.1) rotate(3deg) } 40%,60%,80% { transform: scale3d(1.1,1.1,1.1) rotate(-3deg) } to { transform: scaleX(1) }"
};
const wobble = {
animationName: "uneWobble",
css: {
"animation-name": "uneWobble"
},
keyframes: "0% { transform: translateZ(0) } 15% { transform: translate3d(-25%,0,0) rotate(-5deg) } 30% { transform: translate3d(20%,0,0) rotate(3deg) } 45% { transform: translate3d(-15%,0,0) rotate(-3deg) } 60% { transform: translate3d(10%,0,0) rotate(2deg) } 75% { transform: translate3d(-5%,0,0) rotate(-1deg) } to { transform: translateZ(0) }"
};
const flip = {
animationName: "uneFlip",
css: {
"backface-visibility": "visible",
"animation-name": "uneFlip"
},
keyframes: "0% { transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn) } 0%,40% { animation-timing-function: ease-out } 40% { transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg) } 50% { transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg) } 50%,80% { animation-timing-function: ease-in } 80% { transform: perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg) } to { animation-timing-function: ease-in; transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg) }"
};
const hinge = {
animationName: "uneHinge",
css: {
"animation-duration": "calc(var(--une-animated-duration) * 2)",
"animation-name": "uneHinge",
"transform-origin": "top left"
},
keyframes: "0%,20%,60% { animation-timing-function: ease-in-out } 20%,60% { transform: rotate(80deg) } 40%,80% { animation-timing-function: ease-in-out; opacity: 1; transform: rotate(60deg) } to { opacity: 0; transform: translate3d(0,700px,0) }"
};
const animatedJSON = {
bounce: bounce,
flash: flash,
"head-shake": {
animationName: "uneHeadShake",
css: {
"animation-timing-function": "ease-in-out",
"animation-name": "uneHeadShake"
},
keyframes: "0% { transform: translateX(0) } 6.5% { transform: translateX(-6px) rotateY(-9deg) } 18.5% { transform: translateX(5px) rotateY(7deg) } 31.5% { transform: translateX(-3px) rotateY(-5deg) } 43.5% { transform: translateX(2px) rotateY(3deg) } 50% { transform: translateX(0) }"
},
"heart-beat": {
animationName: "uneHeartBeat",
css: {
"animation-name": "uneHeartBeat",
"animation-duration": "calc(var(--une-animated-duration) * 1.3)",
"animation-timing-function": "ease-in-out"
},
keyframes: "0% { transform: scale(1) } 14% { transform: scale(1.3) } 28% { transform: scale(1) } 42% { transform: scale(1.3) } 70% { transform: scale(1) }"
},
jello: jello,
pulse: pulse,
"rubber-band": {
animationName: "uneRubberBand",
css: {
"animation-name": "uneRubberBand"
},
keyframes: "0% { transform: scaleX(1) } 30% { transform: scale3d(1.25,.75,1) } 40% { transform: scale3d(.75,1.25,1) } 50% { transform: scale3d(1.15,.85,1) } 65% { transform: scale3d(.95,1.05,1) } 75% { transform: scale3d(1.05,.95,1) } to { transform: scaleX(1) }"
},
shake: shake,
"shake-x": {
animationName: "uneShakeX",
css: {
"animation-name": "uneShakeX"
},
keyframes: "0%,to { transform: translateZ(0) } 10%,30%,50%,70%,90% { transform: translate3d(-10px,0,0) } 20%,40%,60%,80% { transform: translate3d(10px,0,0) }"
},
"shake-y": {
animationName: "uneShakeY",
css: {
"animation-name": "uneShakeY"
},
keyframes: "0%,to { transform: translateZ(0) } 10%,30%,50%,70%,90% { transform: translate3d(0,-10px,0) } 20%,40%,60%,80% { transform: translate3d(0,10px,0) }"
},
swing: swing,
tada: tada,
wobble: wobble,
"back-in-down": {
animationName: "uneBackInDown",
css: {
"animation-name": "uneBackInDown"
},
keyframes: "0% { transform: translateY(-1200px) scale(.7) } 0%,80% { opacity: 0.7 } 80% { transform: translateY(0) scale(.7) } to { opacity: 1; transform: scale(1) }"
},
"back-in-left": {
animationName: "uneBackInLeft",
css: {
"animation-name": "uneBackInLeft"
},
keyframes: "0% { transform: translateX(-2000px) scale(.7) } 0%,80% { opacity: 0.7 } 80% { transform: translateX(0) scale(.7) } to { opacity: 1; transform: scale(1) }"
},
"back-in-right": {
animationName: "uneBackInRight",
css: {
"animation-name": "uneBackInRight"
},
keyframes: "0% { transform: translateX(2000px) scale(.7) } 0%,80% { opacity: 0.7 } 80% { transform: translateX(0) scale(.7) } to { opacity: 1; transform: scale(1) }"
},
"back-in-up": {
animationName: "uneBackInUp",
css: {
"animation-name": "uneBackInUp"
},
keyframes: "0% { transform: translateY(1200px) scale(.7) } 0%,80% { opacity: 0.7 } 80% { transform: translateY(0) scale(.7) } to { opacity: 1; transform: scale(1) }"
},
"back-out-down": {
animationName: "uneBackOutDown",
css: {
"animation-name": "uneBackOutDown"
},
keyframes: "0% { opacity: 1; transform: scale(1) } 20% { transform: translateY(0) scale(.7) } 20%,to { opacity: 0.7 } to { transform: translateY(700px) scale(.7) }"
},
"back-out-left": {
animationName: "uneBackOutLeft",
css: {
"animation-name": "uneBackOutLeft"
},
keyframes: "0% { opacity: 1; transform: scale(1) } 20% { transform: translateX(0) scale(.7) } 20%,to { opacity: 0.7 } to { transform: translateX(-2000px) scale(.7) }"
},
"back-out-right": {
animationName: "uneBackOutRight",
css: {
"animation-name": "uneBackOutRight"
},
keyframes: "0% { opacity: 1; transform: scale(1) } 20% { transform: translateX(0) scale(.7) } 20%,to { opacity: 0.7 } to { transform: translateX(2000px) scale(.7) }"
},
"back-out-up": {
animationName: "uneBackOutUp",
css: {
"animation-name": "uneBackOutUp"
},
keyframes: "0% { opacity: 1; transform: scale(1) } 20% { transform: translateY(0) scale(.7) } 20%,to { opacity: 0.7 } to { transform: translateY(-700px) scale(.7) }"
},
"bounce-in": {
animationName: "uneBounceIn",
css: {
"animation-duration": "calc(var(--une-animated-duration) * 0.75)",
"animation-name": "uneBounceIn"
},
keyframes: "0%,20%,40%,60%,80%,to { animation-timing-function: cubic-bezier(.215,.61,.355,1) } 0% { opacity: 0; transform: scale3d(.3,.3,.3) } 20% { transform: scale3d(1.1,1.1,1.1) } 40% { transform: scale3d(.9,.9,.9) } 60% { opacity: 1; transform: scale3d(1.03,1.03,1.03) } 80% { transform: scale3d(.97,.97,.97) } to { opacity: 1; transform: scaleX(1) }"
},
"bounce-in-down": {
animationName: "uneBounceInDown",
css: {
"animation-name": "uneBounceInDown"
},
keyframes: "0%,60%,75%,90%,to { animation-timing-function: cubic-bezier(.215,.61,.355,1) } 0% { opacity: 0; transform: translate3d(0,-3000px,0) scaleY(3) } 60% { opacity: 1; transform: translate3d(0,25px,0) scaleY(.9) } 75% { transform: translate3d(0,-10px,0) scaleY(.95) } 90% { transform: translate3d(0,5px,0) scaleY(.985) } to { transform: translateZ(0) }"
},
"bounce-in-left": {
animationName: "uneBounceInLeft",
css: {
"animation-name": "uneBounceInLeft"
},
keyframes: "0%,60%,75%,90%,to { animation-timing-function: cubic-bezier(.215,.61,.355,1) } 0% { opacity: 0; transform: translate3d(-3000px,0,0) scaleX(3) } 60% { opacity: 1; transform: translate3d(25px,0,0) scaleX(1) } 75% { transform: translate3d(-10px,0,0) scaleX(.98) } 90% { transform: translate3d(5px,0,0) scaleX(.995) } to { transform: translateZ(0) }"
},
"bounce-in-right": {
animationName: "uneBounceInRight",
css: {
"animation-name": "uneBounceInRight"
},
keyframes: "0%,60%,75%,90%,to { animation-timing-function: cubic-bezier(.215,.61,.355,1) } 0% { opacity: 0; transform: translate3d(3000px,0,0) scaleX(3) } 60% { opacity: 1; transform: translate3d(-25px,0,0) scaleX(1) } 75% { transform: translate3d(10px,0,0) scaleX(.98) } 90% { transform: translate3d(-5px,0,0) scaleX(.995) } to { transform: translateZ(0) }"
},
"bounce-in-up": {
animationName: "uneBounceInUp",
css: {
"animation-name": "uneBounceInUp"
},
keyframes: "0%,60%,75%,90%,to { animation-timing-function: cubic-bezier(.215,.61,.355,1) } 0% { opacity: 0; transform: translate3d(0,3000px,0) scaleY(5) } 60% { opacity: 1; transform: translate3d(0,-20px,0) scaleY(.9) } 75% { transform: translate3d(0,10px,0) scaleY(.95) } 90% { transform: translate3d(0,-5px,0) scaleY(.985) } to { transform: translateZ(0) }"
},
"bounce-out": {
animationName: "uneBounceOut",
css: {
"animation-duration": "calc(var(--une-animated-duration) * 0.75)",
"animation-name": "uneBounceOut"
},
keyframes: "20% { transform: scale3d(.9,.9,.9) } 50%,55% { opacity: 1; transform: scale3d(1.1,1.1,1.1) } to { opacity: 0; transform: scale3d(.3,.3,.3) }"
},
"bounce-out-down": {
animationName: "uneBounceOutDown",
css: {
"animation-name": "uneBounceOutDown"
},
keyframes: "20% { transform: translate3d(0,10px,0) scaleY(.985) } 40%,45% { opacity: 1; transform: translate3d(0,-20px,0) scaleY(.9) } to { opacity: 0; transform: translate3d(0,2000px,0) scaleY(3) }"
},
"bounce-out-left": {
animationName: "uneBounceOutLeft",
css: {
"animation-name": "uneBounceOutLeft"
},
keyframes: "20% { opacity: 1; transform: translate3d(20px,0,0) scaleX(.9) } to { opacity: 0; transform: translate3d(-2000px,0,0) scaleX(2) }"
},
"bounce-out-right": {
animationName: "uneBounceOutRight",
css: {
"animation-name": "uneBounceOutRight"
},
keyframes: "20% { opacity: 1; transform: translate3d(-20px,0,0) scaleX(.9) } to { opacity: 0; transform: translate3d(2000px,0,0) scaleX(2) }"
},
"bounce-out-up": {
animationName: "uneBounceOutUp",
css: {
"animation-name": "uneBounceOutUp"
},
keyframes: "20% { transform: translate3d(0,-10px,0) scaleY(.985) } 40%,45% { opacity: 1; transform: translate3d(0,20px,0) scaleY(.9) } to { opacity: 0; transform: translate3d(0,-2000px,0) scaleY(3) }"
},
"fade-in": {
animationName: "uneFadeIn",
css: {
"animation-name": "uneFadeIn"
},
keyframes: "0% { opacity: 0 } to { opacity: 1 }"
},
"fade-in-bottom-left": {
animationName: "uneFadeInBottomLeft",
css: {
"animation-name": "uneFadeInBottomLeft"
},
keyframes: "0% { opacity: 0; transform: translate3d(-100%,100%,0) } to { opacity: 1; transform: translateZ(0) }"
},
"fade-in-bottom-right": {
animationName: "uneFadeInBottomRight",
css: {
"animation-name": "uneFadeInBottomRight"
},
keyframes: "0% { opacity: 0; transform: translate3d(100%,100%,0) } to { opacity: 1; transform: translateZ(0) }"
},
"fade-in-down": {
animationName: "uneFadeInDown",
css: {
"animation-name": "uneFadeInDown"
},
keyframes: "0% { opacity: 0; transform: translate3d(0,-100%,0) } to { opacity: 1; transform: translateZ(0) }"
},
"fade-in-down-big": {
animationName: "uneFadeInDownBig",
css: {
"animation-name": "uneFadeInDownBig"
},
keyframes: "0% { opacity: 0; transform: translate3d(0,-2000px,0) } to { opacity: 1; transform: translateZ(0) }"
},
"fade-in-left": {
animationName: "uneFadeInLeft",
css: {
"animation-name": "uneFadeInLeft"
},
keyframes: "0% { opacity: 0; transform: translate3d(-100%,0,0) } to { opacity: 1; transform: translateZ(0) }"
},
"fade-in-left-big": {
animationName: "uneFadeInLeftBig",
css: {
"animation-name": "uneFadeInLeftBig"
},
keyframes: "0% { opacity: 0; transform: translate3d(-2000px,0,0) } to { opacity: 1; transform: translateZ(0) }"
},
"fade-in-right": {
animationName: "uneFadeInRight",
css: {
"animation-name": "uneFadeInRight"
},
keyframes: "0% { opacity: 0; transform: translate3d(100%,0,0) } to { opacity: 1; transform: translateZ(0) }"
},
"fade-in-right-big": {
animationName: "uneFadeInRightBig",
css: {
"animation-name": "uneFadeInRightBig"
},
keyframes: "0% { opacity: 0; transform: translate3d(2000px,0,0) } to { opacity: 1; transform: translateZ(0) }"
},
"fade-in-top-left": {
animationName: "uneFadeInTopLeft",
css: {
"animation-name": "uneFadeInTopLeft"
},
keyframes: "0% { opacity: 0; transform: translate3d(-100%,-100%,0) } to { opacity: 1; transform: translateZ(0) }"
},
"fade-in-top-right": {
animationName: "uneFadeInTopRight",
css: {
"animation-name": "uneFadeInTopRight"
},
keyframes: "0% { opacity: 0; transform: translate3d(100%,-100%,0) } to { opacity: 1; transform: translateZ(0) }"
},
"fade-in-up": {
animationName: "uneFadeInUp",
css: {
"animation-name": "uneFadeInUp"
},
keyframes: "0% { opacity: 0; transform: translate3d(0,100%,0) } to { opacity: 1; transform: translateZ(0) }"
},
"fade-in-up-big": {
animationName: "uneFadeInUpBig",
css: {
"animation-name": "uneFadeInUpBig"
},
keyframes: "0% { opacity: 0; transform: translate3d(0,2000px,0) } to { opacity: 1; transform: translateZ(0) }"
},
"fade-out": {
animationName: "uneFadeOut",
css: {
"animation-name": "uneFadeOut"
},
keyframes: "0% { opacity: 1 } to { opacity: 0 }"
},
"fade-out-bottom-left": {
animationName: "uneFadeOutBottomLeft",
css: {
"animation-name": "uneFadeOutBottomLeft"
},
keyframes: "0% { opacity: 1; transform: translateZ(0) } to { opacity: 0; transform: translate3d(-100%,100%,0) }"
},
"fade-out-bottom-right": {
animationName: "uneFadeOutBottomRight",
css: {
"animation-name": "uneFadeOutBottomRight"
},
keyframes: "0% { opacity: 1; transform: translateZ(0) } to { opacity: 0; transform: translate3d(100%,100%,0) }"
},
"fade-out-down": {
animationName: "uneFadeOutDown",
css: {
"animation-name": "uneFadeOutDown"
},
keyframes: "0% { opacity: 1 } to { opacity: 0; transform: translate3d(0,100%,0) }"
},
"fade-out-down-big": {
animationName: "uneFadeOutDownBig",
css: {
"animation-name": "uneFadeOutDownBig"
},
keyframes: "0% { opacity: 1 } to { opacity: 0; transform: translate3d(0,2000px,0) }"
},
"fade-out-left": {
animationName: "uneFadeOutLeft",
css: {
"animation-name": "uneFadeOutLeft"
},
keyframes: "0% { opacity: 1 } to { opacity: 0; transform: translate3d(-100%,0,0) }"
},
"fade-out-left-big": {
animationName: "uneFadeOutLeftBig",
css: {
"animation-name": "uneFadeOutLeftBig"
},
keyframes: "0% { opacity: 1 } to { opacity: 0; transform: translate3d(-2000px,0,0) }"
},
"fade-out-right": {
animationName: "uneFadeOutRight",
css: {
"animation-name": "uneFadeOutRight"
},
keyframes: "0% { opacity: 1 } to { opacity: 0; transform: translate3d(100%,0,0) }"
},
"fade-out-right-big": {
animationName: "uneFadeOutRightBig",
css: {
"animation-name": "uneFadeOutRightBig"
},
keyframes: "0% { opacity: 1 } to { opacity: 0; transform: translate3d(2000px,0,0) }"
},
"fade-out-top-left": {
animationName: "uneFadeOutTopLeft",
css: {
"animation-name": "uneFadeOutTopLeft"
},
keyframes: "0% { opacity: 1; transform: translateZ(0) } to { opacity: 0; transform: translate3d(-100%,-100%,0) }"
},
"fade-out-top-right": {
animationName: "uneFadeOutTopRight",
css: {
"animation-name": "uneFadeOutTopRight"
},
keyframes: "0% { opacity: 1; transform: translateZ(0) } to { opacity: 0; transform: translate3d(100%,-100%,0) }"
},
"fade-out-up": {
animationName: "uneFadeOutUp",
css: {
"animation-name": "uneFadeOutUp"
},
keyframes: "0% { opacity: 1 } to { opacity: 0; transform: translate3d(0,-100%,0) }"
},
"fade-out-up-big": {
animationName: "uneFadeOutUpBig",
css: {
"animation-name": "uneFadeOutUpBig"
},
keyframes: "0% { opacity: 1 } to { opacity: 0; transform: translate3d(0,-2000px,0) }"
},
flip: flip,
"flip-in-x": {
animationName: "uneFlipInX",
css: {
"backface-visibility": "visible !important",
"animation-name": "uneFlipInX"
},
keyframes: "0% { opacity: 0; transform: perspective(400px) rotateX(90deg) } 0%,40% { animation-timing-function: ease-in } 40% { transform: perspective(400px) rotateX(-20deg) } 60% { opacity: 1; transform: perspective(400px) rotateX(10deg) } 80% { transform: perspective(400px) rotateX(-5deg) } to { transform: perspective(400px) }"
},
"flip-in-y": {
animationName: "uneFlipInY",
css: {
"backface-visibility": "visible !important",
"animation-name": "uneFlipInY"
},
keyframes: "0% { opacity: 0; transform: perspective(400px) rotateY(90deg) } 0%,40% { animation-timing-function: ease-in } 40% { transform: perspective(400px) rotateY(-20deg) } 60% { opacity: 1; transform: perspective(400px) rotateY(10deg) } 80% { transform: perspective(400px) rotateY(-5deg) } to { transform: perspective(400px) }"
},
"flip-out-x": {
animationName: "uneFlipOutX",
css: {
"animation-duration": "calc(var(--une-animated-duration) * 0.75)",
"animation-name": "uneFlipOutX",
"backface-visibility": "visible !important"
},
keyframes: "0% { transform: perspective(400px) } 30% { opacity: 1; transform: perspective(400px) rotateX(-20deg) } to { opacity: 0; transform: perspective(400px) rotateX(90deg) }"
},
"flip-out-y": {
animationName: "uneFlipOutY",
css: {
"animation-duration": "calc(var(--une-animated-duration) * 0.75)",
"backface-visibility": "visible !important",
"animation-name": "uneFlipOutY"
},
keyframes: "0% { transform: perspective(400px) } 30% { opacity: 1; transform: perspective(400px) rotateY(-15deg) } to { opacity: 0; transform: perspective(400px) rotateY(90deg) }"
},
"light-speed-in-left": {
animationName: "uneLightSpeedInLeft",
css: {
"animation-name": "uneLightSpeedInLeft",
"animation-timing-function": "ease-out"
},
keyframes: "0% { opacity: 0; transform: translate3d(-100%,0,0) skewX(30deg) } 60% { opacity: 1; transform: skewX(-20deg) } 80% { transform: skewX(5deg) } to { transform: translateZ(0) }"
},
"light-speed-in-right": {
animationName: "uneLightSpeedInRight",
css: {
"animation-name": "uneLightSpeedInRight",
"animation-timing-function": "ease-out"
},
keyframes: "0% { opacity: 0; transform: translate3d(100%,0,0) skewX(-30deg) } 60% { opacity: 1; transform: skewX(20deg) } 80% { transform: skewX(-5deg) } to { transform: translateZ(0) }"
},
"light-speed-out-left": {
animationName: "uneLightSpeedOutLeft",
css: {
"animation-name": "uneLightSpeedOutLeft",
"animation-timing-function": "ease-in"
},
keyframes: "0% { opacity: 1 } to { opacity: 0; transform: translate3d(-100%,0,0) skewX(-30deg) }"
},
"light-speed-out-right": {
animationName: "uneLightSpeedOutRight",
css: {
"animation-name": "uneLightSpeedOutRight",
"animation-timing-function": "ease-in"
},
keyframes: "0% { opacity: 1 } to { opacity: 0; transform: translate3d(100%,0,0) skewX(30deg) }"
},
"rotate-in": {
animationName: "uneRotateIn",
css: {
"animation-name": "uneRotateIn",
"transform-origin": "center"
},
keyframes: "0% { opacity: 0; transform: rotate(-200deg) } to { opacity: 1; transform: translateZ(0) }"
},
"rotate-in-down-left": {
animationName: "uneRotateInDownLeft",
css: {
"animation-name": "uneRotateInDownLeft",
"transform-origin": "left bottom"
},
keyframes: "0% { opacity: 0; transform: rotate(-45deg) } to { opacity: 1; transform: translateZ(0) }"
},
"rotate-in-down-right": {
animationName: "uneRotateInDownRight",
css: {
"animation-name": "uneRotateInDownRight",
"transform-origin": "right bottom"
},
keyframes: "0% { opacity: 0; transform: rotate(45deg) } to { opacity: 1; transform: translateZ(0) }"
},
"rotate-in-up-left": {
animationName: "uneRotateInUpLeft",
css: {
"animation-name": "uneRotateInUpLeft",
"transform-origin": "left bottom"
},
keyframes: "0% { opacity: 0; transform: rotate(45deg) } to { opacity: 1; transform: translateZ(0) }"
},
"rotate-in-up-right": {
animationName: "uneRotateInUpRight",
css: {
"animation-name": "uneRotateInUpRight",
"transform-origin": "right bottom"
},
keyframes: "0% { opacity: 0; transform: rotate(-90deg) } to { opacity: 1; transform: translateZ(0) }"
},
"rotate-out": {
animationName: "uneRotateOut",
css: {
"animation-name": "uneRotateOut",
"transform-origin": "center"
},
keyframes: "0% { opacity: 1 } to { opacity: 0; transform: rotate(200deg) }"
},
"rotate-out-down-left": {
animationName: "uneRotateOutDownLeft",
css: {
"animation-name": "uneRotateOutDownLeft",
"transform-origin": "left bottom"
},
keyframes: "0% { opacity: 1 } to { opacity: 0; transform: rotate(45deg) }"
},
"rotate-out-down-right": {
animationName: "uneRotateOutDownRight",
css: {
"animation-name": "uneRotateOutDownRight",
"transform-origin": "right bottom"
},
keyframes: "0% { opacity: 1 } to { opacity: 0; transform: rotate(-45deg) }"
},
"rotate-out-up-left": {
animationName: "uneRotateOutUpLeft",
css: {
"animation-name": "uneRotateOutUpLeft",
"transform-origin": "left bottom"
},
keyframes: "0% { opacity: 1 } to { opacity: 0; transform: rotate(-45deg) }"
},
"rotate-out-up-right": {
animationName: "uneRotateOutUpRight",
css: {
"animation-name": "uneRotateOutUpRight",
"transform-origin": "right bottom"
},
keyframes: "0% { opacity: 1 } to { opacity: 0; transform: rotate(90deg) }"
},
"slide-in-down": {
animationName: "uneSlideInDown",
css: {
"animation-name": "uneSlideInDown"
},
keyframes: "0% { transform: translate3d(0,-100%,0); visibility: visible } to { transform: translateZ(0) }"
},
"slide-in-left": {
animationName: "uneSlideInLeft",
css: {
"animation-name": "uneSlideInLeft"
},
keyframes: "0% { transform: translate3d(-100%,0,0); visibility: visible } to { transform: translateZ(0) }"
},
"slide-in-right": {
animationName: "uneSlideInRight",
css: {
"animation-name": "uneSlideInRight"
},
keyframes: "0% { transform: translate3d(100%,0,0); visibility: visible } to { transform: translateZ(0) }"
},
"slide-in-up": {
animationName: "uneSlideInUp",
css: {
"animation-name": "uneSlideInUp"
},
keyframes: "0% { transform: translate3d(0,100%,0); visibility: visible } to { transform: translateZ(0) }"
},
"slide-out-down": {
animationName: "uneSlideOutDown",
css: {
"animation-name": "uneSlideOutDown"
},
keyframes: "0% { transform: translateZ(0) } to { transform: translate3d(0,100%,0); visibility: hidden }"
},
"slide-out-left": {
animationName: "uneSlideOutLeft",
css: {
"animation-name": "uneSlideOutLeft"
},
keyframes: "0% { transform: translateZ(0) } to { transform: translate3d(-100%,0,0); visibility: hidden }"
},
"slide-out-right": {
animationName: "uneSlideOutRight",
css: {
"animation-name": "uneSlideOutRight"
},
keyframes: "0% { transform: translateZ(0) } to { transform: translate3d(100%,0,0); visibility: hidden }"
},
"slide-out-up": {
animationName: "uneSlideOutUp",
css: {
"animation-name": "uneSlideOutUp"
},
keyframes: "0% { transform: translateZ(0) } to { transform: translate3d(0,-100%,0); visibility: hidden }"
},
hinge: hinge,
"jack-in-the-box": {
animationName: "uneJackInTheBox",
css: {
"animation-name": "uneJackInTheBox"
},
keyframes: "0% { opacity: 0; transform: scale(.1) rotate(30deg); transform-origin: center bottom } 50% { transform: rotate(-10deg) } 70% { transform: rotate(3deg) } to { opacity: 1; transform: scale(1) }"
},
"roll-in": {
animationName: "uneRollIn",
css: {
"animation-name": "uneRollIn"
},
keyframes: "0% { opacity: 0; transform: translate3d(-100%,0,0) rotate(-120deg) } to { opacity: 1; transform: translateZ(0) }"
},
"roll-out": {
animationName: "uneRollOut",
css: {
"animation-name": "uneRollOut"
},
keyframes: "0% { opacity: 1 } to { opacity: 0; transform: translate3d(100%,0,0) rotate(120deg) }"
},
"zoom-in": {
animationName: "uneZoomIn",
css: {
"animation-name": "uneZoomIn"
},
keyframes: "0% { opacity: 0; transform: scale3d(.3,.3,.3) } 50% { opacity: 1 }"
},
"zoom-in-down": {
animationName: "uneZoomInDown",
css: {
"animation-name": "uneZoomInDown"
},
keyframes: "0% { animation-timing-function: cubic-bezier(.55,.055,.675,.19); opacity: 0; transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0) } 60% { animation-timing-function: cubic-bezier(.175,.885,.32,1); opacity: 1; transform: scale3d(.475,.475,.475) translate3d(0,60px,0) }"
},
"zoom-in-left": {
animationName: "uneZoomInLeft",
css: {
"animation-name": "uneZoomInLeft"
},
keyframes: "0% { animation-timing-function: cubic-bezier(.55,.055,.675,.19); opacity: 0; transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0) } 60% { animation-timing-function: cubic-bezier(.175,.885,.32,1); opacity: 1; transform: scale3d(.475,.475,.475) translate3d(10px,0,0) }"
},
"zoom-in-right": {
animationName: "uneZoomInRight",
css: {
"animation-name": "uneZoomInRight"
},
keyframes: "0% { animation-timing-function: cubic-bezier(.55,.055,.675,.19); opacity: 0; transform: scale3d(.1,.1,.1) translate3d(1000px,0,0) } 60% { animation-timing-function: cubic-bezier(.175,.885,.32,1); opacity: 1; transform: scale3d(.475,.475,.475) translate3d(-10px,0,0) }"
},
"zoom-in-up": {
animationName: "uneZoomInUp",
css: {
"animation-name": "uneZoomInUp"
},
keyframes: "0% { animation-timing-function: cubic-bezier(.55,.055,.675,.19); opacity: 0; transform: scale3d(.1,.1,.1) translate3d(0,1000px,0) } 60% { animation-timing-function: cubic-bezier(.175,.885,.32,1); opacity: 1; transform: scale3d(.475,.475,.475) translate3d(0,-60px,0) }"
},
"zoom-out": {
animationName: "uneZoomOut",
css: {
"animation-name": "uneZoomOut"
},
keyframes: "0% { opacity: 1 } 50% { transform: scale3d(.3,.3,.3) } 50%,to { opacity: 0 }"
},
"zoom-out-down": {
animationName: "uneZoomOutDown",
css: {
"animation-name": "uneZoomOutDown",
"transform-origin": "center bottom"
},
keyframes: "40% { animation-timing-function: cubic-bezier(.55,.055,.675,.19); opacity: 1; transform: scale3d(.475,.475,.475) translate3d(0,-60px,0) } to { animation-timing-function: cubic-bezier(.175,.885,.32,1); opacity: 0; transform: scale3d(.1,.1,.1) translate3d(0,2000px,0) }"
},
"zoom-out-left": {
animationName: "uneZoomOutLeft",
css: {
"animation-name": "uneZoomOutLeft",
"transform-origin": "left center"
},
keyframes: "40% { opacity: 1; transform: scale3d(.475,.475,.475) translate3d(42px,0,0) } to { opacity: 0; transform: scale(.1) translate3d(-2000px,0,0) }"
},
"zoom-out-right": {
animationName: "uneZoomOutRight",
css: {
"animation-name": "uneZoomOutRight",
"transform-origin": "right center"
},
keyframes: "40% { opacity: 1; transform: scale3d(.475,.475,.475) translate3d(-42px,0,0) } to { opacity: 0; transform: scale(.1) translate3d(2000px,0,0) }"
},
"zoom-out-up": {
animationName: "uneZoomOutUp",
css: {
"animation-name": "uneZoomOutUp",
"transform-origin": "center bottom"
},
keyframes: "40% { animation-timing-function: cubic-bezier(.55,.055,.675,.19); opacity: 1; transform: scale3d(.475,.475,.475) translate3d(0,60px,0) } to { animation-timing-function: cubic-bezier(.175,.885,.32,1); opacity: 0; transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0) }"
}
};
function getAnimated() {
return animatedJSON;
}
const durationShortcuts = {
faster: 0.5,
fast: 0.8,
slow: 2,
slower: 3
};
const animatedRules = [
["animated", {
"--une-animated-duration": "1s",
"animation-duration": "var(--une-animated-duration)",
"animation-fill-mode": "both"
}],
[
new RegExp(`^animated-(${Object.keys(animatedJSON).join("|")})$`),
([, name]) => {
const { animationName, css, keyframes } = getAnimated()[name];
return [
`@keyframes ${animationName} { ${keyframes} }`,
css
];
},
{
autocomplete: [
`animated-(${Object.keys(animatedJSON).join("|")})`
]
}
],
[
/^animated-(infinite|(repeat-(infinite|(\d+(\.\d+)?))))$/,
([, , , repeat]) => {
const isInfinite = !repeat || repeat === "infinite";
return {
"animation-iteration-count": isInfinite ? "infinite" : repeat
};
},
{
autocomplete: [
"animated-infinite",
"animated-repeat-infinite",
"animated-repeat-<num>"
]
}
],
[
/^animated-delay-(none|(\d+(\.\d+)?(m?s)?))$/,
([, d]) => ({
"animation-delay": d === "none" ? "0ms" : utils.handler.bracket.cssvar.time(d)
}),
{
autocomplete: [
"animated-delay-none",
"animated-delay-$duration"
]
}
],
[
/^animated-(((fast|slow)(?:er)?)|duration-(none|(\d+(\.\d+)?(m?s)?)))/,
([_, , shortcut, , v]) => {
if (shortcut) {
return {
"animation-duration": `calc(var(--une-animated-duration) * ${durationShortcuts[shortcut]});`
};
}
return {
"animation-duration": v === "none" ? "0ms" : utils.handler.bracket.cssvar.time(v)
};
},
{
autocomplete: [
`animated-(${Object.keys(durationShortcuts).join("|")})`,
"animated-duration-none",
"animated-duration-$duration"
]
}
]
];
function getDefaultExportFromCjs (x) {
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
}
var animatedName = [
"bounce",
"flash",
"head-shake",
"heart-beat",
"jello",
"pulse",
"rubber-band",
"shake",
"shake-x",
"shake-y",
"swing",
"tada",
"wobble",
"back-in-down",
"back-in-left",
"back-in-right",
"back-in-up",
"back-out-down",
"back-out-left",
"back-out-right",
"back-out-up",
"bounce-in",
"bounce-in-down",
"bounce-in-left",
"bounce-in-right",
"bounce-in-up",
"bounce-out",
"bounce-out-down",
"bounce-out-left",
"bounce-out-right",
"bounce-out-up",
"fade-in",
"fade-in-bottom-left",
"fade-in-bottom-right",
"fade-in-down",
"fade-in-down-big",
"fade-in-left",
"fade-in-left-big",
"fade-in-right",
"fade-in-right-big",
"fade-in-top-left",
"fade-in-top-right",
"fade-in-up",
"fade-in-up-big",
"fade-out",
"fade-out-bottom-left",
"fade-out-bottom-right",
"fade-out-down",
"fade-out-down-big",
"fade-out-left",
"fade-out-left-big",
"fade-out-right",
"fade-out-right-big",
"fade-out-top-left",
"fade-out-top-right",
"fade-out-up",
"fade-out-up-big",
"flip",
"flip-in-x",
"flip-in-y",
"flip-out-x",
"flip-out-y",
"light-speed-in-left",
"light-speed-in-right",
"light-speed-out-left",
"light-speed-out-right",
"rotate-in",
"rotate-in-down-left",
"rotate-in-down-right",
"rotate-in-up-left",
"rotate-in-up-right",
"rotate-out",
"rotate-out-down-left",
"rotate-out-down-right",
"rotate-out-up-left",
"rotate-out-up-right",
"slide-in-down",
"slide-in-left",
"slide-in-right",
"slide-in-up",
"slide-out-down",
"slide-out-left",
"slide-out-right",
"slide-out-up",
"hinge",
"jack-in-the-box",
"roll-in",
"roll-out",
"zoom-in",
"zoom-in-down",
"zoom-in-left",
"zoom-in-right",
"zoom-in-up",
"zoom-out",
"zoom-out-down",
"zoom-out-left",
"zoom-out-right",
"zoom-out-up"
];
const animatedName$1 = /*@__PURE__*/getDefaultExportFromCjs(animatedName);
function animatedUno({
buildFullVersion = true
} = {}) {
return {
name: "animated-unocss",
rules: [
...animatedRules
],
safelist: buildFullVersion ? animatedName$1.map((name) => `animated-${name}`) : []
};
}
exports.animatedUno = animatedUno;