0

I want to make an image do the following:

  1. Start as a static image
  2. Cycle through multiple frames when hovering
  3. Return to the static image when no longer hovering

Image frames I was working with:

I tried this but could not get it to work (it just displayed nothing, even when copying and pasting the jsfiddle example linked to on that page).

Also is there a way of putting this in an img tag rather than a div one?

Jay
  • 3
  • 2
  • By cycle go you mean spend an nth of a second showing one, then show another etc or more gradual change? – A Haworth Sep 09 '21 at 07:27
  • Honestly either would have been fine, hence my imprecise language. ease-in worked for these purposes. – Jay Sep 10 '21 at 01:25

1 Answers1

0

Pure CSS solution

@keyframes zigzag{
    0%{
        background-image: url('https://i.imgur.com/6z28Xcz.png');
    }
    25%{
        background-image: url('https://i.imgur.com/A0d4DL0.png');
    }
    50%{
        background-image: url('https://i.imgur.com/1QOJG9w.png');
    }
    100%{
        background-image: url('https://i.imgur.com/zwjr693.png');
    }
}

#logo{
    width: 400px;
    height: 170px;
    border: 5px solid;
    border-radius: 20%;
    background-image: url('https://i.imgur.com/6z28Xcz.png');
    background-repeat: no-repeat;
    background-size: cover;
}

#logo:hover{
    animation: zigzag 2000ms ease-in infinite;
}
<div id="logo"></div>
Weilory
  • 1,807
  • 9
  • 24