Adds css styles

src/BlazorApp/wwwroot/css/animations.css

@@ -0,0 +1,110 @@
+/* Animations */
+
+/* Fade In */
+.fade-in {
+  animation: fadeInAnimation ease 1s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+
+@keyframes fadeInAnimation {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Slide */
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideOutRight {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fade-in-up {
+  animation: fadeInUp var(--transition-slow) var(--transition-timing);
+}
+
+/* Spinner */
+.spinner {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  border: 3px solid var(--color-slate-700);
+  border-top-color: var(--color-slate-50);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Pulse */
+.pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* Transitions */
+.transition {
+  transition: all var(--transition-base) var(--transition-timing);
+}
+
+.transition-colors {
+  transition: color var(--transition-base) var(--transition-timing),
+              background-color var(--transition-base) var(--transition-timing),
+              border-color var(--transition-base) var(--transition-timing);
+}
+
+.transition-transform {
+  transition: transform var(--transition-base) var(--transition-timing);
+}
+
+.transition-opacity {
+  transition: opacity var(--transition-base) var(--transition-timing);
+}
+
+/* Hover */
+.hover-scale:hover {
+  transform: scale(1.05);
+}
+
+.hover-lift:hover {
+  transform: translateY(-2px);
+}