Use opacity transition instead of display:none (#2223)

## Background

I'm hiding the info message on keydown in the codemirror because it
sorta overlaps with the space for the query, and if you've seen and
started writing it you don't need it that much anymore.

Not my best work, but it's okay before the designers have an idea how to
compose it nicely.

## Description

This PR changes from `hidden` to `opacity-0` class to reduce the layout
shift and make it more pleasing to the eyes.

Author: hasparus

src/components/index-page/how-it-works/index.tsx

@@ -67,7 +67,9 @@ export function HowItWorks() {
           </ol>
         )}
       </div>
-      <FigureInfo className={interacted ? "hidden" : ""} />
+      <FigureInfo
+        className={clsx("transition-opacity", interacted ? "opacity-0" : "")}
+      />
 
       <Button className="mx-auto mt-8 w-fit lg:mt-16" href={TRY_IT_OUT_URL}>
         Try GraphiQL