@hellouxpavel/cssanimation
Version:
A Powerful CSS Animation Library for Advanced Motion Design.
1,946 lines • 355 kB
JSON
{
"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