What's the best way go about animating this SVG?

Question

I've been scrolling through looking various dev pages, many many answers but I think I'm missing the entire concept. It gets very technical and I'm at a loss for understanding. Most the pages I've read turn up things on the burger icon itself - which is what it is just broken down; so really I'm just at a lost for how to clone that. Strokes and Stroke-disarrays... The following is the SVG component (Open Icon):

export default function OpenIcon() {
  return (
    <svg
      width="24"
      height="20"
      viewBox="0 0 24 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M0.800049 1.9999C0.800049 1.11625 1.51639 0.399902 2.40005 0.399902H21.6C22.4837 0.399902 23.2001 1.11625 23.2001 1.9999C23.2001 2.88356 22.4837 3.5999 21.6 3.5999H2.40005C1.51639 3.5999 0.800049 2.88356 0.800049 1.9999Z"
        fill="#c91249"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M0.800049 9.9999C0.800049 9.11625 1.51639 8.3999 2.40005 8.3999H21.6C22.4837 8.3999 23.2001 9.11625 23.2001 9.9999C23.2001 10.8836 22.4837 11.5999 21.6 11.5999H2.40005C1.51639 11.5999 0.800049 10.8836 0.800049 9.9999Z"
        fill="#c91249"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M0.800049 17.9999C0.800049 17.1162 1.51639 16.3999 2.40005 16.3999H21.6C22.4837 16.3999 23.2001 17.1162 23.2001 17.9999C23.2001 18.8836 22.4837 19.5999 21.6 19.5999H2.40005C1.51639 19.5999 0.800049 18.8836 0.800049 17.9999Z"
        fill="#c91249"
      />
    </svg>
  );
}

Standard. Non-descript (intense descriptions lol). It is called under <OpenFocusTrap> on a MobileNavagation.jsx to operate as an App. It is then likewise displayed on a normal Header.jsx (see following):

MobileNavagation.jsx

<OpenFocusTrap>
      <button
        type="button"
        className="flex justify-center items-center w-7 h-full"
        onClick={() => setIsOpen((previousIsOpen) => !previousIsOpen)}
      >
        <span className="sr-only">{isOpen ? 'Close' : 'Open'} Menu</span>
        {isOpen ? <CloseIcon /> : <OpenIcon />}
      </button>.........

/* Additionally */
function CloseIcon() {
  return (
    <svg
      width="18"
      height="18"
      viewBox="0 0 18 18"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M1 17L17 1M1 1L17 17"
        stroke="#c91249"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

and...

Header.jsx

<Headroom>
      <header className="h-14 lg:h-15" role="banner">
        <div
          className={`fixed z-20 h-14 lg:h-15 w-full bg-realative px-3 md:px-4 md:py-2 lg:pt-2 lg:pb-0 mx-auto ${
            isMobileNavOpen ? '' : 'bg-opacity-95'
          }`}
        > ...........

They're cut short, didn't think the full pages necessary. If anyone have any solid sources for animating the paths? And/or a barney style explanation as to how... Thanks for the assistance.

PS. Current "index.css" for <header> is as follows:

header {
  position: sticky;
  transition-property: all; 
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
  background-color: #191c1b;
  top: 0;
  left: 0;
  height: 80px;
  width: 100%;
  margin-bottom: 10px;
  z-index: 1;
  font-family: 'Times New Roman', Times, serif;
}

@layer header {
  .logo {
    letter-spacing: -.16em;
  }
  .shadow {
    box-shadow: 0 9px 9px -9px rgba(0, 0, 0, 0.13);
  }
  .hidden {
    transform: translateY(-110%);
  }

Note: Some details that might matter...

• I'm using VSCode, WSL as a workspace for Ubuntu.
• "Prettier" and "Tailwind" are included within.
• "Hydrogen" is the app.
• Yarn and github are used primary for repository downloads (npm gives me lip)