使用jquery设置精灵动画

有人知道使用jquery制作精灵动画的最佳方法吗。一个图像有三个阶段，我需要在鼠标上方逐渐变形，最终在最后一个阶段着陆，直到鼠标离开

图为：

谢谢

这是速写

你只需要将图像调整到动画，我将背景设置为每帧切换-151px，你还可以调整延迟时间，

---

享受；）

我尝试了一些使用CSS3transition和动画的东西（它只适用于现代浏览器，请参阅）

您可以在这里看到我的小提琴示例：
主要好处：

• 不需要javascript，它是100%纯CSS
• 无需加载图像
• 平滑动画

HTML只是

​：我试图避免使用伪元素的内部跨度：不幸的是，在Chrome上，当应用到这些元素时，转换不能正常工作（请参阅bug）

CSS

div {
   height: 100px;
   width : 100px;
   -webkit-border-radius: 100px;
   -msie-border-radius: 100px;
   -moz-border-radius: 100px;
   border-radius: 100px;

   -webkit-box-sizing: border-box; 
   -moz-box-sizing: border-box;
   box-sizing: border-box;

   border  : 20px red solid;    
   cursor  : pointer;

}

div span {

   -webkit-transform: rotate(45deg);
   -msie-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   transform: rotate(45deg);

   display  : block;
   margin     : 10px 0 0 -20px;
   background : #fff;
   width    : 102px;
   height   : 40px;

   -webkit-transition: all 2s ease;
   -msie-transition: all 2s ease;
   -moz-transition: all 2s ease;
   -o-transition: all 2s ease;
   transition: all 2s ease;


}

div:hover {
   -webkit-animation : rotation 2s ease;
   -msie-animation : rotation 2s ease;
   -moz-animation : rotation 2s ease;
   -o-animation : rotation 2s ease;
   animation : rotation 2s ease;
}

div:hover span {
   height : 0;
   margin-top : 30px;
}

@-moz-keyframes rotation   {
     0%     { -moz-transform: rotate(45deg); }
     100%   { -moz-transform: rotate(-135deg); }
}

@-webkit-keyframes rotation   {
     0%     { -webkit-transform: rotate(45deg); }
     100%   { -webkit-transform: rotate(-135deg); }
}

@-msie-keyframes rotation   {
     0%     { -msie-transform: rotate(45deg); }
     100%   { -msie-transform: rotate(-135deg); }
}

@-o-keyframes rotation   {
     0%     { -o-transform: rotate(45deg); }
     100%   { -o-transform: rotate(-135deg); }
}


@keyframes rotation   {
     0%     { transform: rotate(45deg); }
     100%   { transform: rotate(-135deg); }
}

这看起来比你选择的答案要好得多：


下面是一个相同的静态图像。如果你能把这张图片的白色部分用PS图象处理软件或其他东西透明的话，这将有一个非常好的平滑关闭效果。
你还会考虑主题的变化吗？对不起，我不明白你的意思。你不知道你喜欢它，但是我把演示放在一起。看看它是否适合你的需要；哇！这正是我想要的。非常感谢你@ChrisTill如果你对css3唯一的效果感兴趣，请看我的答案。谢谢@JackalopeZero。我希望Chrome能很快支持PSUEDOElement上的动画。这太棒了。我唯一的问题是，我使用一个图像作为背景，所以我不能有一个白色块旋转。有办法吗？太好了！我如何继续保持在最后一帧，直到鼠标离开？感谢您的帮助。您需要调整moveBackground函数中的if（），如果精灵达到其长度的最大值，则立即设置它，然后从窗体0开始，并继续旋转。您需要设置if（position>=）{return；}这将停止微调器