Play Gif on Mouseover and Pause Gif on Mouse without replacing images?

Question

I am trying to find sample code that allows the user to animate gifs on hover and pause on mouse out. I have seen many lessons about this, but I need a different effect.

I noticed that most gifs are "reset" on mouse output. That is, either the gif is covered by the general image, or the animation returns to the beginning. What I would like to achieve is more of a “pause” that allows you to start from where you left off without using the placeholder image. Like the example on this page:

http://www.valhead.com/2013/03/11/animation-play-state/

Please note that when you hover over the image, the animation simply pauses without replacing anything, and otherwise resumes.

I don’t know if this is possible with gif, because this example uses basic css forms, but there must be some way to pause the gif on the mouse and resume working on the mouse without covering the image on the loop animation? If there is no way to use the video file that stops on the mouse and plays where it stopped when you hover over it?

Thanks!

EDIT: Thanks to @brbcoding and his genius, this problem has been resolved! Details of the solution can be found either in the posts below or in his blog post: http://codyhenshaw.com/blog/2013/12/17/faux-animated-gifs-with-css3-keyframes/

Answer 1

So, I thought a little about it ... You could do something cool:

First break the gif into multiple images and then leave them using css keyframes.

#faux-gif { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background-image: url(http://i.imgur.com/E2ee6fI.gif); background-repeat: no-repeat; background-attachment: fixed; background-position: center; width: 300px; height: 300px; /* animation: giffy 0.5s infinite linear; */ /* no fade between frames */ animation: giffy 0.5s infinite steps(1); } #faux-gif:hover { animation-play-state:paused; } @keyframes giffy { 0% { background-image: url('http://i.imgur.com/E2ee6fI.gif'); } 15% { background-image: url('http://i.imgur.com/JIi0uul.gif'); } 30% { background-image: url('http://i.imgur.com/owNGnNN.gif');} 45% { background-image: url('http://i.imgur.com/2Ii6XOz.gif'); } 60% { background-image: url('http://i.imgur.com/ZmQBrQ5.gif'); } 75% { background-image: url('http://i.imgur.com/iAsfHyY.gif'); } 90% { background-image: url('http://i.imgur.com/AJwRblj.gif'); } 100% { background-image: url('http://i.imgur.com/fx5wUNY.gif'); } } 

Demo

JavaScript version ... Not verified very carefully, but that would be the main idea.

 window.onload = function() { function FauxGif(element, frames, speed) { this.currentFrame = 0, this.domElement = element, this.frames = frames || null, this.speed = speed || 200; this.interval; this.init(); } FauxGif.prototype = { init: function() { // set the first one to the first image console.log(this.frames[0]) this.domElement.style.backgroundImage = "url(" + this.frames[0] + ")"; }, pause: function() { clearInterval(this.interval); }, resume: function() { var that = this; that.interval = setInterval(function(){ that.currentFrame < that.frames.length - 1 ? that.currentFrame++ : that.currentFrame = 0; that.domElement.style.backgroundImage = "url(" + that.frames[that.currentFrame] + ")"; }, this.speed); } } var frames = [ 'http://i.imgur.com/E2ee6fI.gif', 'http://i.imgur.com/JIi0uul.gif', 'http://i.imgur.com/owNGnNN.gif', 'http://i.imgur.com/2Ii6XOz.gif', 'http://i.imgur.com/ZmQBrQ5.gif', 'http://i.imgur.com/iAsfHyY.gif', 'http://i.imgur.com/AJwRblj.gif', 'http://i.imgur.com/fx5wUNY.gif' ] var elem = document.querySelector('#faux-gif'), gif = new FauxGif(elem, frames); elem.addEventListener('mouseenter', function(){ gif.resume() }); elem.addEventListener('mouseleave', function() { gif.pause(); }); } 

Demo

Answer 2

No. Gif images cannot "see" the mouse. These are just images that are displayed. To pause an animated gif, replacing an inappropriate animated image is required.

To keep up to date, there is a jquery plug ins for animating a sprite consisting of static images. These plugins will allow sprites to pause on the mouse over