lido-player 0.0.2-beta-21-dev → 0.0.2-beta-22-dev

package/dist/collection/css/animation.css

@@ -1,212 +1,212 @@
-/* animations */
-
-@keyframes rightToPlace {
-  from {
-    transform: translateX(2000px);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes topToPlace {
-  from {
-    transform: translateY(-1000px);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes bottomToPlace {
-  from {
-    transform: translateY(1000px);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes placeToLeft {
-  from {
-  }
-  to {
-    transform: translateX(-2000px);
-  }
-}
-@keyframes placeToRight {
-  from {
-  }
-  to {
-    transform: translateX(2000px);
-  }
-}
-
-@keyframes leftToPlace {
-  from {
-    transform: translateX(-2000px);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes shake {
-  0% {
-    transform: translateX(0);
-  }
-  10% {
-    transform: translateX(-5px);
-  }
-  20% {
-    transform: translateX(5px);
-  }
-  30% {
-    transform: translateX(-5px);
-  }
-  40% {
-    transform: translateX(5px);
-  }
-  50% {
-    transform: translateX(-5px);
-  }
-  60% {
-    transform: translateX(5px);
-  }
-  70% {
-    transform: translateX(-5px);
-  }
-  80% {
-    transform: translateX(5px);
-  }
-  90% {
-    transform: translateX(-5px);
-  }
-  100% {
-    transform: translateX(0);
-  }
-}
-
-@keyframes fallAndBounce {
-  0% {
-    transform: translateY(-1000px);
-  }
-  25% {
-    transform: translateY(0px);
-  }
-  50% {
-    transform: translateY(-200px);
-  }
-  75% {
-    transform: translateY(0);
-  }
-  90% {
-    transform: translateY(-100px);
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
-
-@keyframes placeToDown {
-  0% {
-    transform: translateY(0);
-  }
-  100% {
-    transform: translateY(1000px);
-  }
-}
-
-@keyframes strongShake {
-  0% { transform: translateX(0); }
-  20% { transform: translateX(-8px); }
-  40% { transform: translateX(8px); }
-  60% { transform: translateX(-6px); }
-  80% { transform: translateX(6px); }
-  100% { transform: translateX(0); }
-}
-
-@keyframes scaledShake {
-  0% { transform: scale(1) translateX(0); box-shadow: 0 0 0 transparent; }
-  20% { transform: scale(1.10) translateX(-12px); box-shadow: 0 0 10px red; }
-  40% { transform: scale(1.10) translateX(12px); box-shadow: 0 0 12px red; }
-  60% { transform: scale(1.10) translateX(-8px); box-shadow: 0 0 10px red; }
-  80% { transform: scale(1.10) translateX(8px); box-shadow: 0 0 12px red; }
-  100% { transform: scale(1) translateX(0); box-shadow: none; }
-}
-
-@keyframes horizontalShake {
-  0% {
-    transform: scale(1) translateX(0);
-    background-color: transparent;
-  }
-  20% {
-    transform: translateX(-20px);
-    background-color: rgba(255, 0, 0, 0.2);
-  }
-  40% {
-    transform: translateX(20px);
-    background-color: rgba(255, 0, 0, 0.4);
-  }
-  60% {
-    transform: translateX(-10px);
-    background-color: rgba(255, 0, 0, 0.3);
-  }
-  80% {
-    transform: translateX(10px);
-    background-color: rgba(255, 0, 0, 0.2);
-  }
-  100% {
-    transform: translateX(0);
-    background-color: transparent;
-  }
-}
-
-@keyframes verticalShake {
-  0%   { transform: translateY(0); background-color: transparent; }
-  20%  { transform: translateY(-20px); background-color: rgba(255, 0, 0, 0.2); }
-  40%  { transform: translateY(0); background-color: rgba(255, 0, 0, 0.4); }
-  60%  { transform: translateY(20px); background-color: rgba(255, 0, 0, 0.2); }
-  80%  { transform: translateY(0); background-color: rgba(255, 0, 0, 0.1); }
-  100% { transform: translateY(0); background-color: transparent; }
-}
-
-
-@keyframes diagonalShake {
-  0%   { transform: translate(0, 0); background-color: transparent; }
-  25%  { transform: translate(20px, -20px); background-color: rgba(255, 0, 0, 0.2); }
-  50%  { transform: translate(-20px, 20px); background-color: rgba(255, 0, 0, 0.3); }
-  75%  { transform: translate(10px, -10px); background-color: rgba(255, 0, 0, 0.2); }
-  100% { transform: translate(0, 0); background-color: transparent; }
-}
-
-@keyframes glowPulse {
-  0% {
-    filter: drop-shadow(0 0 5px yellow)
-            drop-shadow(0 0 10px yellow)
-            drop-shadow(0 0 20px yellow)
-            drop-shadow(0 0 30px orange);
-  }
-  50% {
-    filter: drop-shadow(0 0 10px yellow)
-            drop-shadow(0 0 20px yellow)
-            drop-shadow(0 0 40px yellow)
-            drop-shadow(0 0 50px orange);
-  }
-  100% {
-    filter: drop-shadow(0 0 5px yellow)
-            drop-shadow(0 0 10px yellow)
-            drop-shadow(0 0 20px yellow)
-            drop-shadow(0 0 30px orange);
-  }
-}
-
-@keyframes trace-animation {
-  0% {
-    
-  }
-  100% {
-    width: var(--trace-width, 100px);
-    height: var(--trace-height, 100px);
-  }
+/* animations */
+
+@keyframes rightToPlace {
+  from {
+    transform: translateX(2000px);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes topToPlace {
+  from {
+    transform: translateY(-1000px);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes bottomToPlace {
+  from {
+    transform: translateY(1000px);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes placeToLeft {
+  from {
+  }
+  to {
+    transform: translateX(-2000px);
+  }
+}
+@keyframes placeToRight {
+  from {
+  }
+  to {
+    transform: translateX(2000px);
+  }
+}
+
+@keyframes leftToPlace {
+  from {
+    transform: translateX(-2000px);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes shake {
+  0% {
+    transform: translateX(0);
+  }
+  10% {
+    transform: translateX(-5px);
+  }
+  20% {
+    transform: translateX(5px);
+  }
+  30% {
+    transform: translateX(-5px);
+  }
+  40% {
+    transform: translateX(5px);
+  }
+  50% {
+    transform: translateX(-5px);
+  }
+  60% {
+    transform: translateX(5px);
+  }
+  70% {
+    transform: translateX(-5px);
+  }
+  80% {
+    transform: translateX(5px);
+  }
+  90% {
+    transform: translateX(-5px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes fallAndBounce {
+  0% {
+    transform: translateY(-1000px);
+  }
+  25% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-200px);
+  }
+  75% {
+    transform: translateY(0);
+  }
+  90% {
+    transform: translateY(-100px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes placeToDown {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(1000px);
+  }
+}
+
+@keyframes strongShake {
+  0% { transform: translateX(0); }
+  20% { transform: translateX(-8px); }
+  40% { transform: translateX(8px); }
+  60% { transform: translateX(-6px); }
+  80% { transform: translateX(6px); }
+  100% { transform: translateX(0); }
+}
+
+@keyframes scaledShake {
+  0% { transform: scale(1) translateX(0); box-shadow: 0 0 0 transparent; }
+  20% { transform: scale(1.10) translateX(-12px); box-shadow: 0 0 10px red; }
+  40% { transform: scale(1.10) translateX(12px); box-shadow: 0 0 12px red; }
+  60% { transform: scale(1.10) translateX(-8px); box-shadow: 0 0 10px red; }
+  80% { transform: scale(1.10) translateX(8px); box-shadow: 0 0 12px red; }
+  100% { transform: scale(1) translateX(0); box-shadow: none; }
+}
+
+@keyframes horizontalShake {
+  0% {
+    transform: scale(1) translateX(0);
+    background-color: transparent;
+  }
+  20% {
+    transform: translateX(-20px);
+    background-color: rgba(255, 0, 0, 0.2);
+  }
+  40% {
+    transform: translateX(20px);
+    background-color: rgba(255, 0, 0, 0.4);
+  }
+  60% {
+    transform: translateX(-10px);
+    background-color: rgba(255, 0, 0, 0.3);
+  }
+  80% {
+    transform: translateX(10px);
+    background-color: rgba(255, 0, 0, 0.2);
+  }
+  100% {
+    transform: translateX(0);
+    background-color: transparent;
+  }
+}
+
+@keyframes verticalShake {
+  0%   { transform: translateY(0); background-color: transparent; }
+  20%  { transform: translateY(-20px); background-color: rgba(255, 0, 0, 0.2); }
+  40%  { transform: translateY(0); background-color: rgba(255, 0, 0, 0.4); }
+  60%  { transform: translateY(20px); background-color: rgba(255, 0, 0, 0.2); }
+  80%  { transform: translateY(0); background-color: rgba(255, 0, 0, 0.1); }
+  100% { transform: translateY(0); background-color: transparent; }
+}
+
+
+@keyframes diagonalShake {
+  0%   { transform: translate(0, 0); background-color: transparent; }
+  25%  { transform: translate(20px, -20px); background-color: rgba(255, 0, 0, 0.2); }
+  50%  { transform: translate(-20px, 20px); background-color: rgba(255, 0, 0, 0.3); }
+  75%  { transform: translate(10px, -10px); background-color: rgba(255, 0, 0, 0.2); }
+  100% { transform: translate(0, 0); background-color: transparent; }
+}
+
+@keyframes glowPulse {
+  0% {
+    filter: drop-shadow(0 0 5px yellow)
+            drop-shadow(0 0 10px yellow)
+            drop-shadow(0 0 20px yellow)
+            drop-shadow(0 0 30px orange);
+  }
+  50% {
+    filter: drop-shadow(0 0 10px yellow)
+            drop-shadow(0 0 20px yellow)
+            drop-shadow(0 0 40px yellow)
+            drop-shadow(0 0 50px orange);
+  }
+  100% {
+    filter: drop-shadow(0 0 5px yellow)
+            drop-shadow(0 0 10px yellow)
+            drop-shadow(0 0 20px yellow)
+            drop-shadow(0 0 30px orange);
+  }
+}
+
+@keyframes trace-animation {
+  0% {
+    
+  }
+  100% {
+    width: var(--trace-width, 100px);
+    height: var(--trace-height, 100px);
+  }
 }