CODEWITHSUNDEEP
cssimageanimated-gif
Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85653

gif animation set up once running only once

I have one png image and another gif image. And the gif image is made from photoshop with setting for once.

enter image description here

Now when I hover the button then background-image is changed with the gif image but if again hovered then it will change the background image to gif file but not animating.

Is there any solution for this?

demo

Upvotes: 2

Views: 1517

Answers (2)

Albzi
Albzi

Reputation: 15619

JsFiddle

Think this is what you wanted:

HTML:

<div id="btn">demo</div>

CSS:

#btn {
  background: blue;
  width: 200px;
  height: 55px;
  color:#fff;
  border-radius:200px;
  position: absolute;
  text-align:center;
  line-height:55px;
  top: 19px;
  right: 107px;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

#btn:hover {
  -webkit-animation-name: tilt;
  animation-name: tilt;
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes tilt {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(45deg);
    transform: perspective(400px) rotateX(45deg);
  }
}

@keyframes tilt {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(45deg);
    -ms-transform: perspective(400px) rotateX(45deg);
    transform: perspective(400px) rotateX(45deg);
  }
}

Upvotes: 0

Dan Johnson
Dan Johnson

Reputation: 1482

Displaying a .gif on hover isn't really the best way to go about this, due to compatibility with other browsers. Maybe you could consider using CSS animations? Here's a cool library made up of some CSS keyframe animations.

http://daneden.github.io/animate.css/

The flipOutX animation might be a close match to what you want.

Upvotes: 2

Related Questions