在鼠标悬停时播放 Gif 并在鼠标移出时暂停 Gif 而不替换图像？

Question

我正在尝试寻找一个代码示例，该示例允许用户在鼠标悬停时制作 gif 动画并在鼠标移出时暂停。我看过很多教程都在谈论这个，但我想要一个不同的效果。

我注意到大多数 gif 在鼠标移出时会“重置”。也就是说，要么 gif 被通用图像覆盖，要么动画恢复到开始。我想要实现的是更无缝的“暂停”，它允许您从上次中断的地方开始，而无需使用占位符图像。类似于此页面上的示例：

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

请注意，当您将鼠标放在图像上时，动画会暂停而不替换任何内容，否则会继续。

我不知道是否可以使用 gif，因为此示例使用基本的 css 形状，但必须有某种方法可以在鼠标移出时暂停 gif 并在鼠标悬停时恢复而不覆盖循环动画上的图像?如果没有，有没有办法使用在鼠标悬停时暂停并在鼠标悬停时播放的电影文件？

谢谢！

编辑：感谢@brbcoding 和他的天才，这个问题得到了解决！可以在下面的帖子或他的博客文章中找到有关解决方案的详细信息：http://codyhenshaw.com/blog/2013/12/17/faux-animated-gifs-with-css3-keyframes/

Answer 1

所以，我想了想......你可以做一些很酷的事情：

首先，将您的 gif 分解为多个图像，然后使用 css 关键帧为它们设置动画。

#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 版本...没有经过非常彻底的测试，但这是基本的想法。

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

没有。 Gif 图像无法“看到”鼠标。它们只是显示的图像。为了暂停动画 gif，它需要交换未动画的类似图像。

正在发布的，有jquery plug ins to animate a sprite 由静态图像组成。这些插件将允许精灵在鼠标悬停时暂停