Better animations for dialogs, animate web composer (#7703)

* animation atoms, use for modals

* respect reduced motion

* simplify animtions

* fix atoms

1 files changed, 20 insertions, 0 deletions

diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts
index a7cf6cb3f..6982de75f 100644
--- a/src/alf/atoms.ts
+++ b/src/alf/atoms.ts
@@ -965,6 +965,26 @@ export const atoms = {
     transitionDelay: '50ms',
   }),
 
+  /*
+   * Animaations
+   */
+  fade_in: web({
+    animation: 'fadeIn ease-out 0.15s',
+  }),
+  fade_out: web({
+    animation: 'fadeOut ease-out 0.15s',
+  }),
+  zoom_in: web({
+    animation: 'zoomIn ease-out 0.1s',
+  }),
+  zoom_out: web({
+    animation: 'zoomOut ease-out 0.1s',
+  }),
+  // special composite animation for dialogs
+  zoom_fade_in: web({
+    animation: 'zoomIn ease-out 0.1s, fadeIn ease-out 0.1s',
+  }),
+
   /**
    * {@link Layout.SCROLLBAR_OFFSET}
    */