如何使用 Javascript 创建带有 Sprite Sheet 的动画按钮？

Question

我正在尝试使用 sprite sheet 创建一个动画按钮。动画应该在悬停时播放，然后在鼠标移开时动画应该完成然后停止。

我该怎么做？我尝试设置 div 的背景并通过悬停事件控制背景位置。我可以获得背景位置以正确设置自身，但每次更改都进行得如此之快，甚至可能是即时的，因此动画不会自行显示。

任何建议都会有所帮助。经过大量搜索但没有成功，我不确定还能尝试什么。

谢谢！

Answer 1

最好的建议是使用 CSS3。
很简单不需要 javascript:

看看这个例子：

http://codeitdown.com/css-sprite-animations/

此处示例：

http://jsfiddle.net/drukaman/ued7mLha/1/

Answer 2

来自参考：https://medium.com/@Mrugraj/sprite-sheet-animation-using-html-css-9091bebd4eeb

HTML

<html>
    <head>
        <title>
            Sprite-Sheet Animation
        </title>
        <link rel=”stylesheet” type=”text/css” href=”main.css”>
    </head>
    <body>
        <div class=”animatedDiv”></div>
    </body>
</html>

CSS

.animatedDiv {
    width: 820px;
    height: 312px;
    background-image: url("https://cf.dropboxstatic.com/static/images/index/animation-strips/hero-intro-bg-vflR5rUow.jpg");
    -webkit-animation: play 2s steps(48) infinite;
    -moz-animation: play 2s steps(48) infinite;
    -ms-animation: play 2s steps(48) infinite;
    -o-animation: play 2s steps(48) infinite;
    animation: play 2s steps(48) infinite;
}
@-webkit-keyframes play {
    from {
        background-position: 0px;
    }
    to {
        background-position: -39360px;
    }
}
@-moz-keyframes play {
    from {
        background-position: 0px;
    }
    to {
        background-position: -39360px;
    }
}
@-ms-keyframes play {
    from {
        background-position: 0px;
    }
    to {
        background-position: -39360px;
    }
}
@-o-keyframes play {
    from {
        background-position: 0px;
    }
    to {
        background-position: -39360px;
    }
}
@keyframes play {
    from {
        background-position: 0px;
    }
    to {
        background-position: -39360px;
    }
}

详细解释见link。

如何使用 Javascript 创建带有 Sprite Sheet 的动画按钮？

How can I create an Animated Button with a Sprite Sheet using Javascript?

html

javascript

animation