What is a good format/approach for transforming a logo to a hamburger icon on hover?-CodePudding

In my React project I have a collapsed sidebar menu with a logo at the top. I would like to add functionality that on hovering over the collapsed sidebar, transforms the logo to a basic hamburger menu, and then reverts back to the logo when the mouse leaves the sidebar.

I have access to a designer that could create an animated asset (e.g. GIF), but I am not sure how I would implement something like this with a GIF.

In my limited experience with animating in web projects, I feel that it would be ideal to somehow be able to use CSS animation to make the transformation but don't have the skills to make that myself and I don't think that is something that the designer can do.

I would love to make this logo: https://i.stack.imgur.com/Bsqx9.png Transform to a basic hamburger icon: https://i.stack.imgur.com/ivRYk.png

Would this be possible to implement in React with a GIF? Other animation formats?
If CSS would be best how could I go about creating the logo in CSS?

Edit: To clarify, I'm hoping to find a way to create a smooth transition between the two. This is why I'm particularly interested in things like CSS animations

CodePudding user response：

Try this code with an Icon instead of a div. I'll add the codesandbox so you can try it out.

Updated Answer

Code with hover to allow tranisitions. With some tweaking you can fade in the Icon using css.

export default function App() {
  const [isHovered, setIsHovered] = useState(false);
  return (
    <div className="App">
      <div
        className={`${isHovered ? "show" : "hide"}`}
        onm ouseOver={() => setIsHovered(false)}
      >
        Hover over me.
      </div>
      <div
        className={`${isHovered ? "hide" : "show"}`}
        onm ouseOut={() => setIsHovered(true)}
      >
        I am shown when someone hovers over the div above.
      </div>
    </div>
  );
}

css:

.hide {
  display: none;
}
.show {
  display: block;
  background-color: red;
  opacity: 0.6;
  transition: 0.3s;
}

.show:hover {
  transition: 0.3s;
  opacity: 1;
  -webkit-transition: all 500ms ease-in;
  -moz-transition: all 500ms ease-in;
  -ms-transition: all 500ms ease-in;
  -o-transition: all 500ms ease-in;
  transition: all 500ms ease-in;
}

Updated sandbox https://codesandbox.io/s/blazing-night-yii1zx?file=/src/styles.css:58-410

Old Answer

export default function App() {
  const [isHovered, setIsHovered] = useState(false);
  return (
    <div>
      {isHovered ? (
        <h1 onm ouseOut={() => setIsHovered(false)}>Hover true</h1>
      ) : (
        <h1 onm ouseOver={() => setIsHovered(true)}>Hover false</h1>
      )}
    </div>
  );
}

Old sandbox The codesandbox: https://codesandbox.io/s/dank-water-mbtwfw?file=/src/App.js:176-579