Use CSS transitions for the Home page animations.

Author: mstange

src/components/app/Home.css

@@ -172,18 +172,23 @@
 
 /* Only show the home transition when reduced motion is not preferred */
 @media (prefers-reduced-motion: no-preference) {
-  .homeTransition-enter {
+  .homeTransition-preEnter {
     opacity: 0.1;
     transform: translateX(100px);
   }
 
-  .homeTransition-enter.homeTransition-enter-active {
+  .homeTransition-entering {
     opacity: 1;
     transform: translateX(0);
     transition:
       opacity 300ms ease-out,
       transform 300ms ease-out;
   }
+
+  .homeTransition-entered {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 
 .homeSectionUploadFromFileInput {

src/components/app/Home.tsx

@@ -16,7 +16,6 @@ import {
   triggerLoadingFromUrl,
 } from 'firefox-profiler/actions/receive-profile';
 import type { BrowserConnection } from 'firefox-profiler/app-logic/browser-connection';
-import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import {
   queryIsMenuButtonEnabled,
   enableMenuButton,
@@ -182,15 +181,8 @@ function DocsButton() {
   );
 }
 
-function InstructionTransition(props: { children: React.ReactNode }) {
-  return (
-    <CSSTransition
-      {...props}
-      classNames="homeTransition"
-      timeout={300}
-      exit={false}
-    />
-  );
+function InstructionTransition({ children }: { children: React.ReactNode }) {
+  return <div className="homeTransition-entered">{children}</div>;
 }
 
 type OwnHomeProps = {
@@ -590,9 +582,9 @@ class HomeImpl extends React.PureComponent<HomeProps, HomeState> {
               faster.
             </p>
           </Localized>
-          <TransitionGroup className="homeInstructionsTransitionGroup">
+          <div className="homeInstructionsTransitionGroup">
             {this._renderInstructions()}
-          </TransitionGroup>
+          </div>
           <section className="homeAdditionalContent">
             {/* Grid container: homeAdditionalContent */}
             <h2 className="homeAdditionalContentTitle protocol-display-xs">