爱心图片：
HTML:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #xin{ display: block; width:100px; height: 100px; background-image: url(images/web_heart_animation.png); background-repeat: no-repeat; background-color: pink; background-size: 2900%; //爱心图片的像素大小为2900*100 } .xin2{ animation: mymoveOK .8s linear; animation-fill-mode: forwards; //动画结束时固定在最后一帧 animation-timing-function: steps(28); //非常重要的属性 没有TA，动画就no OK } @keyframes mymoveOK{ from{background-position: left;} to{background-position: right;} } </style> </head> <body> <div class="dianzanXin"> <div id="xin"></div> </div> <script type="text/javascript" src="js/jquery-1.9.1.js" ></script> <script> $("#xin").on("click",function(){ $(this).addClass("xin2") }) </script> </body> </html>