diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 6bba33f..bc89b5d 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -121,3 +121,51 @@
     background-color: transparent;
   }
 }
+
+.animate-add-row {
+  transition-duration: 0.25s;
+  animation: addRow 0.25s 1 ease-out;
+  transform-origin: top;
+}
+
+.animate-rem-row {
+  transition-duration: 0.25s;
+  animation: remRow 0.25s 1 ease-out;
+  transform-origin: top;
+}
+
+@keyframes addRow {
+  0% {
+    transform: scale(1, 0);
+    line-height: 0px;
+    background-color: #fff;
+    visibility: collapse;
+  }
+  50% {
+    background-color: orange;
+    transform: scale(1, 1);
+    line-height: 18px; /* font-size(16px) + border-top(1px) + border-bottom(1px) */
+    visibility: visible;
+  }
+  100% {
+    background-color: #fff;
+  }
+}
+
+@keyframes remRow {
+  0% {
+    transform: scale(1, 0);
+    line-height: 18px; /* font-size(16px) + border-top(1px) + border-bottom(1px) */
+    background-color: #fff;
+    visibility: collapse;
+  }
+  50% {
+    background-color: orange;
+    transform: scale(1, 1);
+    line-height: 0px;
+    visibility: visible;
+  }
+  100% {
+    background-color: #fff;
+  }
+}
diff --git a/app/javascript/controllers/application.js b/app/javascript/controllers/application.js
index b34182c..d195a89 100644
--- a/app/javascript/controllers/application.js
+++ b/app/javascript/controllers/application.js
@@ -21,6 +21,7 @@ addEventListener("turbo:before-frame-render", (event) => {
 })
 
 // URL: https://edforshaw.co.uk/hotwire-turbo-stream-animations
+// and: https://stackoverflow.com/questions/61306601/css-animation-on-table-row-how-to-affect-height
 // Alternative Hotwire Animate (Wrapper for Animate.css)
 // URL: https://railshackathon.com/entries/12 https://yozu.co.uk/tech-blog-turbocharged-animations-introducing-hotwire-animate/
 // Discussion about hotwire animation: https://discuss.hotwired.dev/t/are-transitions-and-animations-on-hotwire-roadmap/1547/10
@@ -33,7 +34,6 @@ document.addEventListener("turbo:before-stream-render", (event) => {
         event.target.templateElement.content.firstElementChild.classList.add(enterAnimationClass)
       }
     }
-  
     // Add a class to an element we are about to remove from the page
     // as defined by its "data-stream-exit-class"
    var elementToRemove = document.getElementById(event.target.target)
@@ -42,7 +42,7 @@ document.addEventListener("turbo:before-stream-render", (event) => {
      if (streamExitClass) {
        // Intercept the removal of the element
        event.preventDefault()
-       elementToRemove.classList.remove(elementToRemove.dataset.streamEnterClass)
+      //  elementToRemove.classList.remove(elementToRemove.dataset.streamEnterClass)
        elementToRemove.classList.add(streamExitClass)
        // Wait for its animation to end before removing the element
        elementToRemove.addEventListener("animationend", function() {