CSS how to play a GIF when Cursor is on the button then stop when GIF is over-CodePudding

I have a GIF and when the user hovers its cursor to the button, I wanna play the GIF. However, when the GIF is over, I want it to stop in the final status. I need to DON'T use JS/TS for some reason. Or if you really need to use it, use REACT TS.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
   <button id="bloodbutton" >Hover Me</button>
</body>
</html>

CSS:

#bloodbutton{
   text-decoration: none;
   border: none;
   padding: 8px 30px;
   background-color: rgb(255, 255, 255);
   color: rgb(0, 0, 0);
   outline: none;
   box-shadow: 3px 6px 6px 1px rgba(0, 0, 0, 0.24);
   border-radius: 5px;
   width: 300px;
   height: 300px;
}

GIF: https://gfycat.com/helpfulmarvelousdeviltasmanian

As File: https://www.mediafire.com/view/8jwklbgy26lvr98/blood.gif/file

CodePudding user response：

You can't do this using only HTML and CSS. YOu MUST either alter the gif itself to loop only once (as in the gif image must be changed), or use JS to change the loop or do some Canvas magic. That's assuming you're given an infinite loading gif.

CodePudding user response：

You could try to convert gif to mp4 file and change to autoplay on hover in CSS