Added turbo_stream animations

app/assets/stylesheets/application.css

@@ -13,3 +13,111 @@
  *= require_tree .
  *= require_self
  */
+
+.animate-job-in {
+  animation: fade-in 0.25s ease-out, slide-in 0.25s ease-out;
+}
+
+.animate-job-out {
+  animation: fade-out 0.25s ease-out, slide-out 0.25s ease-out;
+}
+
+.animate-fade-in {
+  animation: fade-in 0.25s ease-out;
+}
+
+.animate-fade-out {
+  animation: fade-out 0.25s ease-out;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes slide-in {
+  from {
+    transform: translateX(4rem);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-out {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(4rem);
+  }
+}
+
+.animate-job-item-in {
+  overflow: hidden;
+  animation: slide-down 0.5s ease-out;
+}
+
+.animate-job-item-out {
+  overflow: hidden;
+  animation: slide-up 0.5s ease-out;
+}
+
+/* "max-height: auto" unfortunately does not work here, so we set
+   to a fixed height that is greater than the expected height. */
+@keyframes slide-down {
+  from {
+    max-height: 0;
+  }
+  to {
+    max-height: 3rem;
+  }
+}
+
+@keyframes slide-up {
+  from {
+    max-height: 3rem;
+  }
+  to {
+    max-height: 0;
+  }
+}
+
+.animate-flash-increase {
+  animation: flash-green 0.5s ease-in-out;
+}
+
+.animate-flash-decrease {
+  animation: flash-red 0.5s ease-in-out;
+}
+
+@keyframes flash-green {
+  from {
+    background-color: #a7f3d0;
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
+@keyframes flash-red {
+  from {
+    background-color: #fecaca;
+  }
+  to {
+    background-color: transparent;
+  }
+}