initial commit

src/styles/css-config/animations.css

@@ -0,0 +1,107 @@
+@property --percent {
+  syntax: '<percentage>';
+  initial-value: 0%;
+  inherits: false;
+}
+
+@keyframes pulseGreen {
+  0% {
+    background-color: hsl(var(--blue) 85 35 / 0.1);
+    color: hsl(var(--blue) 100 69 / 1.0);
+  }
+
+  50% {
+    background-color: hsl(var(--green) 85 35 / 0.5);
+    color: hsl(var(--green) 100 69 / 1.0);
+  }
+
+  100% {
+    background-color: hsl(var(--blue) 85 35 / 0.1);
+    color: hsl(var(--blue) 100 69 / 1.0);
+  }
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0.001;
+    height: 0;
+  }
+
+  to {
+    opacity: 1;
+    height: var(--height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 1;
+    height: var(--height);
+  }
+
+  to {
+    opacity: 0;
+    height: 0;
+  }
+}
+
+@keyframes rotateIn {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(180deg);
+  }
+}
+
+@keyframes rotateOut {
+  from {
+    transform: rotate(180deg);
+  }
+
+  to {
+    transform: rotate(0deg);
+  }
+}
+
+@keyframes rotateIn90 {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(90deg);
+  }
+}
+
+@keyframes rotateOut90 {
+  from {
+    transform: rotate(90deg);
+  }
+
+  to {
+    transform: rotate(0deg);
+  }
+}
+
+
+@keyframes percentToFifty {
+  from {
+    --percent: 0%;
+  }
+
+  to {
+    --percent: 50%;
+  }
+}
+
+@keyframes percentToZero {
+  from {
+    --percent: 50%;
+  }
+
+  to {
+    --percent: 0%;
+  }
+}