Photoshop Question posted in
The official user guide can be found here.

gif animation set up once running only once – Photoshop

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

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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);
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search