Refactor spring and carnival animations, enhance configuration options, and improve asset management

This commit is contained in:
CodeDevMLH
2026-02-21 04:31:15 +01:00
parent cde5201991
commit 4e8a37540f
6 changed files with 460 additions and 90 deletions

View File

@@ -18,7 +18,8 @@
will-change: top;
animation-name: carnival-fall;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
.carnival-sway-wrapper {
@@ -35,9 +36,8 @@
background-color: #f0f;
will-change: transform;
animation-name: carnival-flutter;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 2s;
}
.carnival-confetti.circle {
@@ -52,15 +52,8 @@
}
.carnival-confetti.triangle {
width: 0;
height: 0;
background-color: transparent !important;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid;
width: 10px;
height: 10px;
background-color: inherit;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
@@ -84,18 +77,9 @@
@keyframes carnival-flutter {
0% {
transform: rotate3d(1, 1, 1, 0deg);
}
25% {
transform: rotate3d(1, 0.5, 0, 90deg);
}
50% {
transform: rotate3d(0.5, 1, 0.5, 180deg);
}
75% {
transform: rotate3d(0, 0.5, 1, 270deg);
transform: rotate3d(var(--rx, 1), var(--ry, 1), var(--rz, 0), 0deg);
}
100% {
transform: rotate3d(1, 1, 1, 360deg);
transform: rotate3d(var(--rx, 1), var(--ry, 1), var(--rz, 0), var(--rot-dir, 360deg));
}
}