Replace react-transition-group usage with plain CSS animations.

Author: mstange

package.json

@@ -99,7 +99,6 @@
     "react-intersection-observer": "^10.0.3",
     "react-redux": "^9.2.0",
     "react-splitter-layout": "^4.0.0",
-    "react-transition-group": "^4.4.5",
     "redux": "^5.0.1",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^3.1.0",
@@ -131,7 +130,6 @@
     "@types/react": "^18.3.28",
     "@types/react-dom": "^18.3.1",
     "@types/react-splitter-layout": "^4.0.0",
-    "@types/react-transition-group": "^4.4.5",
     "@types/redux-logger": "^3.0.6",
     "@types/tgwf__co2": "^0.14.2",
     "@typescript-eslint/eslint-plugin": "^8.58.0",

src/components/app/Home.css

@@ -199,17 +199,20 @@
 
 /* Only show the home transition when reduced motion is not preferred */
 @media (prefers-reduced-motion: no-preference) {
-  .homeTransition-enter {
-    opacity: 0.1;
-    transform: translateX(100px);
+  @keyframes homeSlideIn {
+    from {
+      opacity: 0.1;
+      transform: translateX(100px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
   }
 
-  .homeTransition-enter.homeTransition-enter-active {
-    opacity: 1;
-    transform: translateX(0);
-    transition:
-      opacity 300ms ease-out,
-      transform 300ms ease-out;
+  .homeInstructions-animate {
+    animation: homeSlideIn 300ms ease-out;
   }
 }