UNPKG

@hellouxpavel/cssanimation

Version:

A Powerful CSS Animation Library for Advanced Motion Design.

1,946 lines 355 kB
{ "blurIn": { "class": "ca__fx-blurIn", "animation": { "name": "blurIn", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "from": { "filter": "blur(20px)", "opacity": "0" }, "to": { "opacity": "1", "filter": "none" } }, "tags": [], "category": "uncategorized" }, "blurInLeft": { "class": "ca__fx-blurInfromLeft", "animation": { "name": "blurInLeft", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "from": { "transform": "translateX(-100%)", "filter": "blur(20px)", "opacity": "0" }, "to": { "opacity": "1", "transform": "translateX(0)", "filter": "none" } }, "tags": [], "category": "uncategorized" }, "blurInRight": { "class": "ca__fx-blurInFromRight", "animation": { "name": "blurInRight", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "from": { "transform": "translateX(100%)", "filter": "blur(20px)", "opacity": "0" }, "to": { "opacity": "1", "transform": "translateX(0)", "filter": "none" } }, "tags": [], "category": "uncategorized" }, "blurInTop": { "class": "ca__fx-blurInFromTop", "animation": { "name": "blurInTop", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "from": { "transform": "translateY(-100%)", "filter": "blur(20px)", "opacity": "0" }, "to": { "opacity": "1", "transform": "translateY(0)", "filter": "none" } }, "tags": [], "category": "uncategorized" }, "blurInBottom": { "class": "ca__fx-blurInFromBottom", "animation": { "name": "blurInBottom", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "from": { "transform": "translateY(100%)", "filter": "blur(20px)", "opacity": "0" }, "to": { "opacity": "1", "transform": "translateY(0)", "filter": "none" } }, "tags": [], "category": "uncategorized" }, "blurOut": { "class": "ca__fx-blurOut", "animation": { "name": "blurOut", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "85%": { "filter": "blur(20px)" }, "100%": { "opacity": "0" } }, "tags": [], "category": "uncategorized" }, "blurOutLeft": { "class": "ca__fx-blurOutToLeft", "animation": { "name": "blurOutLeft", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "85%": { "filter": "blur(20px)", "transform": "translateX(-100%)" }, "100%": { "opacity": "0" } }, "tags": [], "category": "uncategorized" }, "blurOutRight": { "class": "ca__fx-blurOutToRight", "animation": { "name": "blurOutRight", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "85%": { "filter": "blur(20px)", "transform": "translateX(100%)" }, "100%": { "opacity": "0" } }, "tags": [], "category": "uncategorized" }, "blurOutTop": { "class": "ca__fx-blurOutToTop", "animation": { "name": "blurOutTop", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "85%": { "filter": "blur(20px)", "transform": "translateY(-100%)" }, "100%": { "opacity": "0" } }, "tags": [], "category": "uncategorized" }, "blurOutBottom": { "class": "ca__fx-blurOutToBottom", "animation": { "name": "blurOutBottom", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "85%": { "filter": "blur(20px)", "transform": "translateY(100%)" }, "100%": { "opacity": "0" } }, "tags": [], "category": "uncategorized" }, "bounceX": { "class": "ca__fx-bounceX", "animation": { "name": "bounceX", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "0%": { "animation-timing-function": "ease-out", "transform": "scale3d(1, 1, 1)" }, "25%": { "animation-timing-function": "ease-out", "transform": "scale3d(1, 1, 1)" }, "55%": { "animation-timing-function": "ease-out", "transform": "scale3d(1, 1, 1)" }, "85%": { "animation-timing-function": "ease-out", "transform": "scale3d(1, 1, 1)" }, "100%": { "animation-timing-function": "ease-out", "transform": "scale3d(1, 1, 1)" }, "41%": { "animation-timing-function": "ease-in", "transform": "scale3d(1.8, 1, 1)" }, "44%": { "animation-timing-function": "ease-in", "transform": "scale3d(1.8, 1, 1)" }, "70%": { "animation-timing-function": "ease-in", "transform": "scale3d(1.5, 1, 1)" }, "90%": { "transform": "scale3d(1.1, 1, 1)" } }, "tags": [], "category": "uncategorized" }, "bounceY": { "class": "ca__fx-bounceY", "animation": { "name": "bounceY", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "0%": { "animation-timing-function": "ease-out", "transform": "scale3d(1, 1, 1)" }, "25%": { "animation-timing-function": "ease-out", "transform": "scale3d(1, 1, 1)" }, "55%": { "animation-timing-function": "ease-out", "transform": "scale3d(1, 1, 1)" }, "85%": { "animation-timing-function": "ease-out", "transform": "scale3d(1, 1, 1)" }, "100%": { "animation-timing-function": "ease-out", "transform": "scale3d(1, 1, 1)" }, "41%": { "animation-timing-function": "ease-in", "transform": "scale3d(1, 2, 1)" }, "44%": { "animation-timing-function": "ease-in", "transform": "scale3d(1, 2, 1)" }, "70%": { "animation-timing-function": "ease-in", "transform": "scale3d(1, 1.5, 1)" }, "90%": { "transform": "scale3d(1, 1.1, 1)" } }, "tags": [], "category": "uncategorized" }, "bounceZoomOut": { "class": "ca__fx-bounceZoomOut", "animation": { "name": "bounceZoomOut", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "0%": { "animation-timing-function": "ease-out", "transform": "scale(1)" }, "25%": { "animation-timing-function": "ease-out", "transform": "scale(1)" }, "55%": { "animation-timing-function": "ease-out", "transform": "scale(1)" }, "85%": { "animation-timing-function": "ease-out", "transform": "scale(1)" }, "100%": { "animation-timing-function": "ease-out", "transform": "scale(1)" }, "41%": { "animation-timing-function": "ease-in", "transform": "scale(0.3)" }, "44%": { "animation-timing-function": "ease-in", "transform": "scale(0.3)" }, "70%": { "animation-timing-function": "ease-in", "transform": "scale(0.5)" }, "90%": { "transform": "scale(0.9)" } }, "tags": [], "category": "uncategorized" }, "spring": { "class": "ca__fx-spring", "animation": { "name": "spring", "duration": "0.6s)", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "infinite" }, "keyframes": { "0%": { "transform": "translateY(0)" }, "100%": { "transform": "translateY(0)" }, "50%": { "transform": "translateY(calc(var(--spring-height, 1rem) * -1))" } }, "tags": [], "category": "uncategorized" }, "boing": { "class": "ca__fx-boing", "animation": { "name": "boing", "duration": "0.9s)", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "infinite" }, "keyframes": { "0%": { "transform": "translateY(0)" }, "100%": { "transform": "translateY(0)" }, "30%": { "transform": "translateY(calc(var(--boing-height, 1rem) * -1.1))" }, "50%": { "transform": "translateY(calc(var(--boing-height, 1rem) * 0.3))" }, "70%": { "transform": "translateY(calc(var(--boing-height, 1rem) * -0.5))" }, "90%": { "transform": "translateY(calc(var(--boing-height, 1rem) * 0.15))" } }, "tags": [], "category": "uncategorized" }, "hop": { "class": "ca__fx-hop", "animation": { "name": "hop", "duration": "0.5s)", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "infinite" }, "keyframes": { "0%": { "transform": "translateY(0)" }, "100%": { "transform": "translateY(0)" }, "40%": { "transform": "translateY(calc(var(--hop-height, 0.8rem) * -1))" } }, "tags": [], "category": "uncategorized" }, "lift": { "class": "ca__fx-lift", "animation": { "name": "lift", "duration": "1.2s)", "timingFunction": "ease-in-out", "fillMode": "both", "iterationCount": "infinite" }, "keyframes": { "0%": { "transform": "translateY(0)" }, "100%": { "transform": "translateY(0)" }, "50%": { "transform": "translateY(calc(var(--lift-height, 10px) * -1))" } }, "tags": [], "category": "uncategorized" }, "popUp": { "class": "ca__fx-popUp", "animation": { "name": "popUp", "duration": "0.5s)", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "0%": { "transform": "scale(0.95) translateY(0)", "opacity": "0" }, "60%": { "transform": "scale(1.05) translateY(calc(var(--popUp-height, 8px) * -1))", "opacity": "1" }, "80%": { "transform": "scale(0.98) translateY(calc(var(--popUp-height, 8px) * -0.3))" }, "100%": { "transform": "scale(1) translateY(0)" } }, "tags": [], "category": "uncategorized" }, "rebound": { "class": "ca__fx-rebound", "animation": { "name": "rebound", "duration": "0.7s)", "timingFunction": "ease-in-out", "fillMode": "both", "iterationCount": "infinite" }, "keyframes": { "0%": { "transform": "translateY(0)" }, "100%": { "transform": "translateY(0)" }, "20%": { "transform": "translateY(calc(var(--rebound-height, 1rem) * -1))" }, "40%": { "transform": "translateY(calc(var(--rebound-height, 1rem) * 0.5))" }, "60%": { "transform": "translateY(calc(var(--rebound-height, 1rem) * -0.3))" } }, "tags": [], "category": "uncategorized" }, "jump": { "class": "ca__fx-jump", "animation": { "name": "jump", "duration": "0.6s)", "timingFunction": "ease-in-out", "fillMode": "both", "iterationCount": "infinite" }, "keyframes": { "0%": { "transform": "translateY(0)" }, "100%": { "transform": "translateY(0)" }, "30%": { "transform": "translateY(calc(var(--jump-height, 1.2rem) * -1))" } }, "tags": [], "category": "uncategorized" }, "jumping": { "class": "ca__fx-jumping", "animation": { "name": "jumping", "duration": "1.2s", "timingFunction": "ease-in-out", "fillMode": "both", "iterationCount": "infinite", "transform-origin": "bottom center" }, "keyframes": { "0%": { "transform": "translateY(0) scale(1)", "opacity": "0.7" }, "100%": { "transform": "translateY(0) scale(1)", "opacity": "0.7" }, "25%": { "transform": "translateY(-20%) scale(1.1)", "opacity": "1" }, "50%": { "transform": "translateY(0) scale(0.95)", "opacity": "0.8" }, "75%": { "transform": "translateY(-10%) scale(1.05)", "opacity": "0.9" } }, "tags": [], "category": "uncategorized" }, "launch": { "class": "ca__fx-launch", "animation": { "name": "launch", "duration": "0.8s)", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "infinite" }, "keyframes": { "0%": { "transform": "translateY(0)" }, "20%": { "transform": "translateY(calc(var(--launch-height, 2rem) * -1.2))" }, "40%": { "transform": "translateY(calc(var(--launch-height, 2rem) * 0.5))" }, "60%": { "transform": "translateY(calc(var(--launch-height, 2rem) * -0.3))" }, "80%": { "transform": "translateY(calc(var(--launch-height, 2rem) * 0.15))" }, "100%": { "transform": "translateY(0)" } }, "tags": [], "category": "uncategorized" }, "levitate": { "class": "ca__fx-levitate", "animation": { "name": "levitate", "duration": "2s)", "timingFunction": "ease-in-out", "fillMode": "both", "iterationCount": "infinite" }, "keyframes": { "0%": { "transform": "translateY(0)" }, "100%": { "transform": "translateY(0)" }, "50%": { "transform": "translateY(calc(var(--levitate-height, 0.6rem) * -1))" } }, "tags": [], "category": "uncategorized" }, "jitterJump": { "class": "ca__fx-jitterJump", "animation": { "name": "jitterJump", "duration": "1.3s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "infinite" }, "keyframes": { "0%": { "transform": "translateY(0) scale(1, 1)" }, "20%": { "transform": "translateY(-40px) scale(1.1, 0.9)" }, "40%": { "transform": "translateY(0) scale(0.9, 1.1)" }, "60%": { "transform": "translateY(-20px) scale(1.05, 0.95)" }, "80%": { "transform": "translateY(0) scale(0.98, 1.02)" }, "100%": { "transform": "translateY(0) scale(1, 1)" } }, "tags": [], "category": "uncategorized" }, "elasticJump": { "class": "ca__fx-elasticJump", "animation": { "name": "elasticJump", "duration": "1.2s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "infinite", "transform-origin": "bottom center", "display": "inline-block" }, "keyframes": { "0%": { "transform": "translateY(0) scaleY(1)" }, "100%": { "transform": "translateY(0) scaleY(1)" }, "30%": { "transform": "translateY(-40%) scaleY(1.2)" }, "50%": { "transform": "translateY(0) scaleY(0.9)" }, "70%": { "transform": "translateY(-20%) scaleY(1.05)" } }, "tags": [], "category": "uncategorized" }, "squishyBounce": { "class": "ca__fx-squishyBounce", "animation": { "name": "squishyBounce", "duration": "1.4s", "timingFunction": "ease-in-out", "fillMode": "both", "iterationCount": "infinite", "transform-origin": "bottom center", "display": "inline-block" }, "keyframes": { "0%": { "transform": "translateY(0) scale(1, 1)" }, "100%": { "transform": "translateY(0) scale(1, 1)" }, "25%": { "transform": "translateY(-30%) scale(1.1, 0.9)" }, "50%": { "transform": "translateY(0) scale(0.95, 1.05)" }, "75%": { "transform": "translateY(-15%) scale(1.05, 0.95)" } }, "tags": [], "category": "uncategorized" }, "bouncyDrop": { "class": "ca__fx-bouncyDrop", "animation": { "name": "bouncyDrop", "duration": "1.5s", "timingFunction": "ease-in-out", "fillMode": "both", "iterationCount": "infinite", "transform-origin": "top center", "display": "inline-block" }, "keyframes": { "0%": { "transform": "translateY(-100%) scaleY(1.2)", "opacity": "0" }, "30%": { "transform": "translateY(10%) scaleY(0.8)", "opacity": "1" }, "60%": { "transform": "translateY(-5%) scaleY(1.1)" }, "100%": { "transform": "translateY(0) scaleY(1)" } }, "tags": [], "category": "uncategorized" }, "bounceInTop": { "class": "ca__fx-bounceInTop", "animation": { "name": "bounceInTop", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "0%": { "transform": "translate3d(0, -300%, 0)" }, "58%": { "transform": "translate3d(0, 27px, 0)" }, "73%": { "transform": "translate3d(0, -12px, 0)" }, "88%": { "transform": "translate3d(0, 7px, 0)" } }, "tags": [], "category": "uncategorized" }, "bounceInBottom": { "class": "ca__fx-bounceInBottom", "animation": { "name": "bounceInBottom", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "0%": { "transform": "translate3d(0, 300%, 0)" }, "58%": { "transform": "translate3d(0, -27px, 0)" }, "73%": { "transform": "translate3d(0, 12px, 0)" }, "88%": { "transform": "translate3d(0, -8px, 0)" } }, "tags": [], "category": "uncategorized" }, "bounceInLeft": { "class": "ca__fx-bounceInLeft", "animation": { "name": "bounceInLeft", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "0%": { "transform": "translate3d(-300%, 0, 0)" }, "58%": { "transform": "translate3d(27px, 0, 0)" }, "73%": { "transform": "translate3d(-12px, 0, 0)" }, "88%": { "transform": "translate3d(8px, 0, 0)" } }, "tags": [], "category": "uncategorized" }, "bounceInRight": { "class": "ca__fx-bounceInRight", "animation": { "name": "bounceInRight", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "0%": { "transform": "translate3d(300%, 0, 0)" }, "58%": { "transform": "translate3d(-27px, 0, 0)" }, "73%": { "transform": "translate3d(12px, 0, 0)" }, "88%": { "transform": "translate3d(-8px, 0, 0)" } }, "tags": [], "category": "uncategorized" }, "bounceFromTop": { "class": "ca__fx-bounceFromTop", "animation": { "name": "bounceFromTop", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "0%": { "animation-timing-function": "ease-out", "transform": "translate3d(0, 0, 0)" }, "25%": { "animation-timing-function": "ease-out", "transform": "translate3d(0, 0, 0)" }, "55%": { "animation-timing-function": "ease-out", "transform": "translate3d(0, 0, 0)" }, "85%": { "animation-timing-function": "ease-out", "transform": "translate3d(0, 0, 0)" }, "100%": { "animation-timing-function": "ease-out", "transform": "translate3d(0, 0, 0)" }, "41%": { "animation-timing-function": "ease-in", "transform": "translate3d(0, -80px, 0) scale3d(1, 1.6, 1)" }, "44%": { "animation-timing-function": "ease-in", "transform": "translate3d(0, -80px, 0) scale3d(1, 1.6, 1)" }, "70%": { "animation-timing-function": "ease-in", "transform": "translate3d(0, -20px, 0)" }, "90%": { "transform": "translate3d(0, -4px, 0)" } }, "tags": [], "category": "uncategorized" }, "bounceFromDown": { "class": "ca__fx-bounceFromDown", "animation": { "name": "bounceFromDown", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "0%": { "animation-timing-function": "ease-out", "transform": "translate3d(0, 0, 0)" }, "25%": { "animation-timing-function": "ease-out", "transform": "translate3d(0, 0, 0)" }, "55%": { "animation-timing-function": "ease-out", "transform": "translate3d(0, 0, 0)" }, "85%": { "animation-timing-function": "ease-out", "transform": "translate3d(0, 0, 0)" }, "100%": { "animation-timing-function": "ease-out", "transform": "translate3d(0, 0, 0)" }, "41%": { "animation-timing-function": "ease-in", "transform": "translate3d(0, 80px, 0) scale3d(1, 1.2, 1)" }, "44%": { "animation-timing-function": "ease-in", "transform": "translate3d(0, 80px, 0) scale3d(1, 1.2, 1)" }, "70%": { "animation-timing-function": "ease-in", "transform": "translate3d(0, 20px, 0)" }, "90%": { "transform": "translate3d(0, 4px, 0)" } }, "tags": [], "category": "uncategorized" }, "bounceOutTop": { "class": "ca__fx-bounceOutTop", "animation": { "name": "bounceOutTop", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "18%": { "transform": "translate3d(0, 27px, 0)" }, "33%": { "transform": "translate3d(0, -12px, 0)" }, "48%": { "transform": "translate3d(0, 8px, 0)" }, "100%": { "opacity": "0", "transform": "translate3d(0, -300%, 0)" } }, "tags": [], "category": "uncategorized" }, "bounceOutBottom": { "class": "ca__fx-bounceOutBottom", "animation": { "name": "bounceOutBottom", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "18%": { "transform": "translate3d(0, -27px, 0)" }, "33%": { "transform": "translate3d(0, 12px, 0)" }, "48%": { "transform": "translate3d(0, -8px, 0)" }, "100%": { "opacity": "0", "transform": "translate3d(0, 300%, 0)" } }, "tags": [], "category": "uncategorized" }, "bounceOutLeft": { "class": "ca__fx-bounceOutLeft", "animation": { "name": "bounceOutLeft", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "18%": { "transform": "translate3d(27px, 0, 0)" }, "33%": { "transform": "translate3d(-12px, 0, 0)" }, "48%": { "transform": "translate3d(8px, 0, 0)" }, "100%": { "opacity": "0", "transform": "translate3d(-300%, 0, 0)" } }, "tags": [], "category": "uncategorized" }, "bounceOutRight": { "class": "ca__fx-bounceOutRight", "animation": { "name": "bounceOutRight", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "18%": { "transform": "translate3d(-27px, 0, 0)" }, "33%": { "transform": "translate3d(12px, 0, 0)" }, "48%": { "transform": "translate3d(-8px, 0, 0)" }, "100%": { "opacity": "0", "transform": "translate3d(300%, 0, 0)" } }, "tags": [], "category": "uncategorized" }, "clipCircleExpandIn": { "class": "ca__fx-clipCircleExpandIn", "animation": { "name": "clipCircleExpandIn", "duration": "3s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1", "clip-path": "circle(0% at 50% 50%)" }, "keyframes": { "0%": { "clip-path": "circle(0% at 50% 50%)" }, "100%": { "clip-path": "circle(150% at 50% 50%)" } }, "tags": [], "category": "uncategorized" }, "clipCircleCollapseOut": { "class": "ca__fx-clipCircleCollapseOut", "animation": { "name": "clipCircleCollapseOut", "duration": "3s", "timingFunction": "ease-in", "fillMode": "both", "iterationCount": "1", "clip-path": "circle(150% at 50% 50%)", "will-change": "clip-path" }, "keyframes": { "0%": { "clip-path": "circle(150% at 50% 50%)" }, "100%": { "clip-path": "circle(0% at 50% 50%)" } }, "tags": [], "category": "uncategorized" }, "clipDiagonalWipeIn": { "class": "ca__fx-clipDiagonalWipeIn", "animation": { "name": "clipDiagonalWipeIn", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "0%": { "clip-path": "polygon(0 0, 0 0, 0 0, 0 0)", "opacity": "0" }, "100%": { "clip-path": "polygon(0 0, 100% 0, 100% 100%, 0% 100%)", "opacity": "1" } }, "tags": [], "category": "uncategorized" }, "clipDiagonalWipeOut": { "class": "ca__fx-clipDiagonalWipeOut", "animation": { "name": "clipDiagonalWipeOut", "duration": "1s", "timingFunction": "ease-in-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "0%": { "clip-path": "polygon(0 0, 100% 0, 100% 100%, 0% 100%)", "opacity": "1" }, "100%": { "clip-path": "polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%)", "opacity": "0" } }, "tags": [], "category": "uncategorized" }, "clipGridReveal": { "class": "ca__fx-clipGridReveal", "animation": { "name": "clipGridReveal", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "0%": { "clip-path": "polygon(0 0, 0 0, 0 0, 0 0)", "opacity": "0" }, "40%": { "clip-path": "polygon(0 0, 100% 0, 0 100%, 0 0)", "opacity": "0.5" }, "70%": { "clip-path": "polygon(0 0, 100% 0, 100% 100%, 0 100%)", "opacity": "0.8" }, "100%": { "clip-path": "inset(0)", "opacity": "1" } }, "tags": [], "category": "uncategorized" }, "clipGridCollapse": { "class": "ca__fx-clipGridCollapse", "animation": { "name": "clipGridCollapse", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "0%": { "clip-path": "inset(0)", "opacity": "1" }, "40%": { "clip-path": "polygon(0 0, 100% 0, 100% 100%, 0 100%)", "opacity": "0.5" }, "100%": { "clip-path": "polygon(0 0, 0 0, 0 0, 0 0)", "opacity": "0" } }, "tags": [], "category": "uncategorized" }, "clipVerticalSplitIn": { "class": "ca__fx-clipVerticalSplitIn", "animation": { "name": "clipVerticalSplitIn", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "0%": { "clip-path": "polygon(50% 0, 50% 0, 50% 100%, 50% 100%)", "opacity": "0" }, "100%": { "clip-path": "polygon(0 0, 100% 0, 100% 100%, 0% 100%)", "opacity": "1" } }, "tags": [], "category": "uncategorized" }, "clipVerticalSplitOut": { "class": "ca__fx-clipVerticalSplitOut", "animation": { "name": "clipVerticalSplitOut", "duration": "0.9s", "timingFunction": "ease-in", "fillMode": "forwards", "iterationCount": "1" }, "keyframes": { "0%": { "clip-path": "polygon(0 0, 100% 0, 100% 100%, 0 100%)", "opacity": "1" }, "100%": { "clip-path": "polygon(50% 0, 50% 0, 50% 100%, 50% 100%)", "opacity": "0" } }, "tags": [], "category": "uncategorized" }, "clipCrossSweepOut": { "class": "ca__fx-clipCrossSweepOut", "animation": { "name": "clipCrossSweepOut", "duration": "1.1s", "timingFunction": "ease-in", "fillMode": "forwards", "iterationCount": "1" }, "keyframes": { "0%": { "clip-path": "inset(0)", "opacity": "1" }, "60%": { "clip-path": "polygon(25% 25%, 75% 25%, 75% 75%, 25% 75%)", "opacity": "0.6" }, "100%": { "clip-path": "polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)", "opacity": "0" } }, "tags": [], "category": "uncategorized" }, "clipBurstCircle": { "class": "ca__fx-clipBurstCircle", "animation": { "name": "clipBurstCircle", "duration": "0.9s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1", "clip-path": "circle(0% at 50% 50%)" }, "keyframes": { "0%": { "clip-path": "circle(0% at 50% 50%)", "opacity": "0" }, "60%": { "clip-path": "circle(60% at 50% 50%)", "opacity": "1" }, "100%": { "clip-path": "circle(120% at 50% 50%)" } }, "tags": [], "category": "uncategorized" }, "clipDiamondIn": { "class": "ca__fx-clipDiamondIn", "animation": { "name": "clipDiamondIn", "duration": "0.8s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "0%": { "clip-path": "polygon(50% 0, 100% 50%, 50% 100%, 0% 50%)", "opacity": "0", "transform": "scale(0.6)" }, "100%": { "clip-path": "inset(0)", "opacity": "1", "transform": "scale(1)" } }, "tags": [], "category": "uncategorized" }, "clipDiagonalSliceIn": { "class": "ca__fx-clipDiagonalSliceIn", "animation": { "name": "clipDiagonalSliceIn", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "0%": { "clip-path": "polygon(0 0, 0 0, 0 100%, 0 100%)", "opacity": "0" }, "100%": { "clip-path": "polygon(0 0, 100% 0, 100% 100%, 0 100%)", "opacity": "1" } }, "tags": [], "category": "uncategorized" }, "clipMultiStepReveal": { "class": "ca__fx-clipMultiStepReveal", "animation": { "name": "clipMultiStepReveal", "duration": "1.1s", "timingFunction": "ease-in-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "0%": { "clip-path": "polygon(0 0, 0 0, 0 100%, 0 100%)", "opacity": "0" }, "50%": { "clip-path": "polygon(0 0, 80% 0, 80% 100%, 0 100%)", "opacity": "0.6" }, "100%": { "clip-path": "polygon(0 0, 100% 0, 100% 100%, 0 100%)", "opacity": "1" } }, "tags": [], "category": "uncategorized" }, "clipMultiStepCollapse": { "class": "ca__fx-clipMultiStepCollapse", "animation": { "name": "clipMultiStepCollapse", "duration": "1.1s", "timingFunction": "ease-in-out", "fillMode": "forwards", "iterationCount": "1" }, "keyframes": { "0%": { "clip-path": "polygon(0 0, 100% 0, 100% 100%, 0 100%)", "opacity": "1" }, "50%": { "clip-path": "polygon(0 0, 80% 0, 80% 100%, 0 100%)", "opacity": "0.5" }, "100%": { "clip-path": "polygon(0 0, 0 0, 0 100%, 0 100%)", "opacity": "0" } }, "tags": [], "category": "uncategorized" }, "morph": { "class": "ca__fx-clipAnimate", "animation": { "name": "morph", "duration": "8s", "timingFunction": "ease-in-out", "fillMode": "both", "iterationCount": "infinite" }, "keyframes": { "0%": { "clip-path": "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)" }, "50%": { "clip-path": "polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%)" }, "100%": { "clip-path": "polygon(0% 15%, 15% 0%, 100% 0%, 85% 15%, 100% 100%, 0% 100%)" } }, "tags": [], "category": "uncategorized" }, "wave-morph": { "class": "ca__fx-clipAnimateWave", "animation": { "name": "wave-morph", "duration": "7s", "timingFunction": "ease-in-out", "fillMode": "both", "iterationCount": "infinite" }, "keyframes": { "0%": { "/* A gentle, slightly curved top and bottom */\r\n clip-path": "polygon(\r\n 0% 20%,\r\n 10% 25%,\r\n 20% 20%,\r\n 30% 25%,\r\n 40% 20%,\r\n 50% 25%,\r\n 60% 20%,\r\n 70% 25%,\r\n 80% 20%,\r\n 90% 25%,\r\n 100% 20%,\r\n 100% 80%,\r\n 90% 75%,\r\n 80% 80%,\r\n 70% 75%,\r\n 60% 80%,\r\n 50% 75%,\r\n 40% 80%,\r\n 30% 75%,\r\n 20% 80%,\r\n 10% 75%,\r\n 0% 80%\r\n )" }, "25%": { "/* More pronounced wave, expanding horizontally */\r\n clip-path": "polygon(\r\n 0% 0%,\r\n 15% 10%,\r\n 30% 0%,\r\n 45% 10%,\r\n 60% 0%,\r\n 75% 10%,\r\n 90% 0%,\r\n 100% 10%,\r\n 100% 90%,\r\n 90% 100%,\r\n 75% 90%,\r\n 60% 100%,\r\n 45% 90%,\r\n 30% 100%,\r\n 15% 90%,\r\n 0% 100%\r\n )" }, "50%": { "/* Reaching a flatter, more compressed state */\r\n clip-path": "polygon(0% 30%, 100% 30%, 100% 70%, 0% 70%)" }, "75%": { "/* Another wave pattern, perhaps inverted or shifted */\r\n clip-path": "polygon(\r\n 0% 10%,\r\n 10% 0%,\r\n 20% 10%,\r\n 30% 0%,\r\n 40% 10%,\r\n 50% 0%,\r\n 60% 10%,\r\n 70% 0%,\r\n 80% 10%,\r\n 90% 0%,\r\n 100% 10%,\r\n 100% 90%,\r\n 90% 100%,\r\n 80% 90%,\r\n 70% 100%,\r\n 60% 90%,\r\n 50% 100%,\r\n 40% 90%,\r\n 30% 100%,\r\n 20% 90%,\r\n 10% 100%,\r\n 0% 90%\r\n )" }, "100%": { "/* Back to the initial gentle wave */\r\n clip-path": "polygon(\r\n 0% 20%,\r\n 10% 25%,\r\n 20% 20%,\r\n 30% 25%,\r\n 40% 20%,\r\n 50% 25%,\r\n 60% 20%,\r\n 70% 25%,\r\n 80% 20%,\r\n 90% 25%,\r\n 100% 20%,\r\n 100% 80%,\r\n 90% 75%,\r\n 80% 80%,\r\n 70% 75%,\r\n 60% 80%,\r\n 50% 75%,\r\n 40% 80%,\r\n 30% 75%,\r\n 20% 80%,\r\n 10% 75%,\r\n 0% 80%\r\n )" } }, "tags": [], "category": "uncategorized" }, "danceTop": { "class": "ca__fx-danceTop", "animation": { "name": "danceTop", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1", "transform-origin": "top" }, "keyframes": { "16%": { "transform": "skew(-14deg)" }, "33%": { "transform": "skew(12deg)" }, "49%": { "transform": "skew(-8deg)" }, "66%": { "transform": "skew(6deg)" }, "83%": { "transform": "skew(-4deg)" } }, "tags": [], "category": "uncategorized" }, "danceMiddle": { "class": "ca__fx-danceMiddle", "animation": { "name": "danceMiddle", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "16%": { "transform": "skew(-14deg)" }, "33%": { "transform": "skew(12deg)" }, "49%": { "transform": "skew(-8deg)" }, "66%": { "transform": "skew(6deg)" }, "83%": { "transform": "skew(-4deg)" } }, "tags": [], "category": "uncategorized" }, "danceBottom": { "class": "ca__fx-danceBottom", "animation": { "name": "danceBottom", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1", "transform-origin": "bottom" }, "keyframes": { "16%": { "transform": "skew(-14deg)" }, "33%": { "transform": "skew(12deg)" }, "49%": { "transform": "skew(-8deg)" }, "66%": { "transform": "skew(6deg)" }, "83%": { "transform": "skew(-4deg)" } }, "tags": [], "category": "uncategorized" }, "doorCloseFromLeft": { "class": "ca__fx-doorCloseFromLeft", "animation": { "name": "doorCloseFromLeft", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "0%": { "transform": "perspective(400px) rotateY(90deg)", "transform-origin": "left", "opacity": "0" }, "50%": { "transform": "perspective(400px) rotateY(0deg)", "transform-origin": "left", "opacity": "1" }, "100%": { "transform": "perspective(400px) rotateY(0deg)", "transform-origin": "left", "opacity": "1" } }, "tags": [], "category": "uncategorized" }, "doorOpenFromRight": { "class": "ca__fx-doorOpenFromRight", "animation": { "name": "doorOpenFromRight", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "0%": { "transform": "perspective(400px) rotateY(0deg)", "transform-origin": "left", "opacity": "1" }, "50%": { "transform": "perspective(400px) rotateY(90deg)", "transform-origin": "left", "opacity": "0" }, "100%": { "transform": "perspective(400px) rotateY(90deg)", "transform-origin": "left", "opacity": "0" } }, "tags": [], "category": "uncategorized" }, "doorCloseFromRight": { "class": "ca__fx-doorCloseFromRight", "animation": { "name": "doorCloseFromRight", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "0%": { "transform": "perspective(400px) rotateY(-90deg)", "transform-origin": "right", "opacity": "0" }, "50%": { "transform": "perspective(400px) rotateY(0deg)", "transform-origin": "right", "opacity": "1" }, "100%": { "transform": "perspective(400px) rotateY(0deg)", "transform-origin": "right", "opacity": "1" } }, "tags": [], "category": "uncategorized" }, "doorOpenFromLeft": { "class": "ca__fx-doorOpenFromLeft", "animation": { "name": "doorOpenFromLeft", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "0%": { "transform": "perspective(400px) rotateY(0deg)", "transform-origin": "right", "opacity": "1" }, "50%": { "transform": "perspective(400px) rotateY(-90deg)", "transform-origin": "right", "opacity": "0" }, "100%": { "transform": "perspective(400px) rotateY(-90deg)", "transform-origin": "right", "opacity": "0" } }, "tags": [], "category": "uncategorized" }, "curtainReveal": { "class": "ca__fx-curtainReveal", "animation": { "name": "curtainReveal", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1", "transform-origin": "top center", "overflow": "hidden" }, "keyframes": { "0%": { "clip-path": "inset(0 0 100% 0)", "opacity": "0" }, "50%": { "clip-path": "inset(0 0 0 0)", "opacity": "1" }, "100%": { "clip-path": "inset(0 0 0 0)", "opacity": "1" } }, "tags": [], "category": "uncategorized" }, "curtainClose": { "class": "ca__fx-curtainClose", "animation": { "name": "curtainClose", "duration": "1s", "timingFunction": "ease-in", "fillMode": "both", "iterationCount": "1", "transform-origin": "top center" }, "keyframes": { "0%": { "clip-path": "inset(0 0 0 0)", "opacity": "1" }, "50%": { "clip-path": "inset(0 0 100% 0)", "opacity": "0" }, "100%": { "clip-path": "inset(0 0 100% 0)", "opacity": "0" } }, "tags": [], "category": "uncategorized" }, "spiralTwistIn": { "class": "ca__fx-spiralTwistIn", "animation": { "name": "spiralTwistIn", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1", "transform-origin": "center", "will-change": "transform, opacity" }, "keyframes": { "0%": { "transform": "scale(0) rotate(720deg)", "opacity": "0" }, "60%": { "transform": "scale(1.05) rotate(-30deg)", "opacity": "1" }, "100%": { "transform": "scale(1) rotate(0deg)" } }, "tags": [], "category": "uncategorized" }, "spiralTwistOut": { "class": "ca__fx-spiralTwistOut", "animation": { "name": "spiralTwistOut", "duration": "1s", "timingFunction": "ease-in", "fillMode": "both", "iterationCount": "1", "transform-origin": "center", "will-change": "transform, opacity" }, "keyframes": { "0%": { "transform": "scale(1) rotate(0deg)", "opacity": "1" }, "100%": { "transform": "scale(0.3) rotate(-360deg)", "opacity": "0" } }, "tags": [], "category": "uncategorized" }, "spotlightFocus": { "class": "ca__fx-spotlightFocus", "animation": { "name": "spotlightFocus", "duration": "1s", "timingFunction": "ease-in-out", "fillMode": "both", "iterationCount": "1", "transform-origin": "center", "will-change": "transform, opacity" }, "keyframes": { "0%": { "filter": "brightness(0.2) blur(4px)", "transform": "scale(1.2)", "opacity": "0" }, "100%": { "filter": "brightness(1) blur(0)", "transform": "scale(1)", "opacity": "1" } }, "tags": [], "category": "uncategorized" }, "spotlightFade": { "class": "ca__fx-spotlightFade", "animation": { "name": "spotlightFade", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1", "transform-origin": "center", "will-change": "transform, opacity" }, "keyframes": { "0%": { "filter": "brightness(1) blur(0)", "opacity": "1", "transform": "scale(1)" }, "100%": { "filter": "brightness(0.3) blur(6px)", "opacity": "0", "transform": "scale(0.9)" } }, "tags": [], "category": "uncategorized" }, "elevateLeft": { "class": "ca__fx-elevateLeft", "animation": { "name": "elevateLeft", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "0%": { "transform": "translateY(100%) rotate(-20deg)", "transform-origin": "right" }, "40%": { "transform": "rotate(20deg)", "transform-origin": "right" }, "65%": { "transform": "rotate(0deg)", "transform-origin": "right" } }, "tags": [], "category": "uncategorized" }, "elevateRight": { "class": "ca__fx-elevateRight", "animation": { "name": "elevateRight", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "0%": { "transform": "translateY(100%) rotate(20deg)", "transform-origin": "left" }, "40%": { "transform": "rotate(-20deg)", "transform-origin": "left" }, "65%": { "transform": "rotate(0deg)", "transform-origin": "left" } }, "tags": [], "category": "uncategorized" }, "bobble": { "class": "ca__fx-bobble", "animation": { "name": "bobble", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1", "transform-origin": "center" }, "keyframes": { "0%": { "transform": "translateX(0%)" }, "100%": { "transform": "translateX(0%)" }, "15%": { "transform": "translateX(-25%) rotate(-5deg)" }, "30%": { "transform": "translateX(20%) rotate(3deg)" }, "45%": { "transform": "translateX(-15%) rotate(-3deg)" }, "60%": { "transform": "translateX(10%) rotate(2deg)" }, "75%": { "transform": "translateX(-5%) rotate(-1deg)" }, "90%": { "transform": "translateX(2%) rotate(0.5deg)" } }, "tags": [], "category": "uncategorized" }, "jelly": { "class": "ca__fx-jelly", "animation": { "name": "jelly", "duration": "1s", "timingFunction": "ease-out", "fillMode": "both", "iterationCount": "1" }, "keyframes": { "0%": { "transform": "scale(1, 1)" }, "25%": { "transform": "scale(0.9, 1.1)" }, "50%": { "transform": "scale(1.1, 0.9)" }, "75%": { "transform": "scale(0.95, 1.05)" }, "100%": { "transform": "scale(1, 1)" } }, "tags": [], "cate