add animations

assets/ui/theme.rcss

@@ -11,6 +11,7 @@ body {
     height: 100%;
     margin: 0;
     padding: 0;
+    animation: 0.2s cubic-out fade-in;
 }
 
 /* ============== Typography ============== */
@@ -245,3 +246,74 @@ body {
     flex: 1;
     overflow: auto;
 }
+
+/* ============== Animations ============== */
+/* RmlUi syntax: animation: <duration> <delay>? <tweening-function>? <iterations>? alternate? paused? <keyframes-name> */
+
+/* Fade in animation */
+@keyframes fade-in {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+}
+
+/* Slide in from right */
+@keyframes slide-in-right {
+    0% { transform: translateX(100px); opacity: 0; }
+    100% { transform: translateX(0px); opacity: 1; }
+}
+
+/* Slide in from left */
+@keyframes slide-in-left {
+    0% { transform: translateX(-100px); opacity: 0; }
+    100% { transform: translateX(0px); opacity: 1; }
+}
+
+/* Slide up animation */
+@keyframes slide-up {
+    0% { transform: translateY(50px); opacity: 0; }
+    100% { transform: translateY(0px); opacity: 1; }
+}
+
+/* Scale in animation */
+@keyframes scale-in {
+    0% { transform: scale(0.9); opacity: 0; }
+    100% { transform: scale(1.0); opacity: 1; }
+}
+
+/* Screen transition classes */
+.nav-forward {
+    animation: 0.2s cubic-out slide-in-right;
+}
+
+.nav-back {
+    animation: 0.2s cubic-out slide-in-left;
+}
+
+.nav-home {
+    animation: 0.2s back-out scale-in;
+}
+
+.nav-default {
+    animation: 0.15s cubic-out fade-in;
+}
+
+/* Animation utility classes */
+.animate-fade-in {
+    animation: 0.2s cubic-out fade-in;
+}
+
+.animate-slide-right {
+    animation: 0.25s cubic-out slide-in-right;
+}
+
+.animate-slide-left {
+    animation: 0.25s cubic-out slide-in-left;
+}
+
+.animate-slide-up {
+    animation: 0.2s cubic-out slide-up;
+}
+
+.animate-scale-in {
+    animation: 0.2s back-out scale-in;
+}