Refactor spring and carnival animations, enhance configuration options, and improve asset management
This commit is contained in:
@@ -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));
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user