css keyframes donot work Properly In React

Question

Hi everyone when i call css keyframes from my styles.css to index.js it dosenot work properly

this is my index.js file

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { useState } from 'react';
    import "./Style.css";

    const BgChangeMouseEvent = () => {
      const [isEnterMouse, setIsEnterMouse] = useState(false);

      const handleBackground = state => {
        setIsEnterMouse(state);
      };

      return (
        <div
          className={isEnterMouse ? "logo" : ""}
          onMouseEnter={() => handleBackground(true)}
          onMouseLeave={() => handleBackground(true)}
        >
           <img alt='icon' src={"http://pngimg.com/uploads/car_logo/car_logo_PNG1644.png"}/>
        </div>

      );
    };

    ReactDOM.render(<BgChangeMouseEvent />, document.getElementById('root'));

And this is my styles.css file

    .logo {
      left: -620px;
      top: -440px;

    }
    .logo {
      width: 100px;
      position: relative;
      animation-name: example;
      animation-duration: 6s;
    }
    @keyframes example {
      0%   { left:0px; top:0px; width:3000px}
      25%  { left:400px; top:200px;}
      100% { left:-620px; top:-440px;}
    }

I want to use css @keyframes for logo with mouse event but the logo dosenot change properly.

Answer 1

Let's see, first of all the Listeners should be on the Image not the div , second of all the class that triggers the animation should also be applied on Image when the mouse hovers over the Image.Lastly, when the mouse is no longer on the Image you want to change the Image width back to the original so is isEnterMouse should be set to false i.e handleBackground(false)

(I made some changes to better view the logo, you can change it back if you want)

 <img
      alt="icon"
      onMouseEnter={() => handleBackground(true)}
      onMouseLeave={() => handleBackground(false)}
      className={`LogoImage ${
        isEnterMouse ? "LogoImageIncrease" : "LogoImageDecrease"
      }`}
      src={"http://pngimg.com/uploads/car_logo/car_logo_PNG1644.png"}
    />

Style.css

.LogoImage {
  width: 100px;
  height: 100px;
}
.logo {
  width: 100px;
  position: relative;
  animation-name: example;
  animation-duration: 6s;
}
.LogoImageIncrease {
  position: relative;
  animation: IncreaseWidth;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes IncreaseWidth {
  0% {
    width: 100px;
  }
  100% {
    width: 200px;
  }
}

.LogoImageDecrease {
  position: relative;
  animation: DecreaseWidth;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes DecreaseWidth {
  0% {
    width: 200px;
  }
  100% {
    width: 100px;
  }
}

CodeSandbox here