创建一个出色的，由CSS驱动的Sprited Firefox动画

川长思鸟来 2023-02-22 01:27 6阅读 0赞

![Firefox Animation][]

Mozilla recently formally announced Firefox OS and its partners at Mobile World Congress and I couldn't be more excited.  Firefox OS is going to change the lives of people in developing countries, hopefully making a name for itself in the US as well.  The [partners website][] also  launched with an awesome Firefox animation that I couldn't pass up the opportunity to write about -- let me show you how it was created!

Mozilla最近在世界移动通信大会上正式宣布了Firefox OS及其合作伙伴，我对此感到非常兴奋。 Firefox OS将会改变发展中国家人民的生活，希望在美国也能自己成名。 [合作伙伴网站][partners website]还发布了一个很棒的Firefox动画，让我无法错过这个机会，让我向您展示它的创建方式！

[View Demo][] [观看演示][View Demo]

Before we get to the code, let's have a look at the image:

在开始编写代码之前，让我们看一下图像：

![format_png][]

The image is a whopping 7020x156 pixels; one large sprite. Only one HTML element is required for the animation:

图像高达7020x156像素； 一个大的精灵。 动画只需要一个HTML元素：

With the DIV in place, we can use some basic CSS to add a background image and dimensions:

有了DIV，我们可以使用一些基本CSS添加背景图像和尺寸：

#foxtail {
    	background: url(foxtail.png) 0 0 no-repeat;
    	width: 156px;
    	height: 156px;
    }

The last step is periodically updating the background-position of the DIV to provide the appearance of animation via the sprite.  The animation can be created with only CSS, as shared by [Luke Stevenson][]:

最后一步是定期更新DIV的背景位置，以通过精灵提供动画外观。 如[Luke Stevenson][]所分享，只能使用CSS创建动画：

@keyframes animate-tail {  
        0% {background-position: -6864px 0; }
        100% {background-position: 0 0;}
    }
    
    #foxtail {
      animation: animate-tail 3.75s steps(44) infinite;
    }

A beautiful work of art by Luke -- using CSS steps to move to each position! The animation can run infinitely, resetting to the original background position and starting over. In the case that you need to support older browsers, we can use a bit of jQuery and a sprite animation utility called [Spritely][]:

Luke的精美艺术品-使用CSS步骤移动到每个位置！ 动画可以无限运行，重置为原始背景位置并重新开始。 如果您需要支持较旧的浏览器，我们可以使用一些jQuery和一个名为[Spritely][]的精灵动画实用程序：

jQuery("#foxtail").sprite({ fps: 12, no_of_frames: 44, rewind: true });

Spritely's API allows for simple sprite animations with maximum control of speed and replay.

Spritely的API允许简单的Sprite动画，以最大程度地控制速度和重放。

[View Demo][] [观看演示][View Demo]

I could waste time saying how hot this animation is but no need -- you can already see that!  Luke's awesome contribution allows us to avoid jQuery bloat and JavaScript all together, but there's still a solution available for older browsers.

我可能会浪费时间说这个动画有多热，但没有必要-您已经看到了！ Luke的杰出贡献使我们能够同时避免jQuery膨胀和JavaScript，但是对于较旧的浏览器仍然有可用的解决方案。

> 翻译自: [https://davidwalsh.name/firefox-animation][https_davidwalsh.name_firefox-animation]

[Firefox Animation]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9maXJlZm94YW5pbWF0aW9uLmpwZw?x-oss-process=image/format,png
[partners website]: http://www.mozilla.org/en-US/firefox/partners/
[View Demo]: https://davidwalsh.name/demo/firefox-animation.php
[format_png]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9mb3h0YWlsLnBuZw?x-oss-process=image/format,png
[Luke Stevenson]: http://lucanos.com/
[Spritely]: http://www.spritely.net/
[https_davidwalsh.name_firefox-animation]: https://davidwalsh.name/firefox-animation