关键帧动画animation、transform结合
<html> <head> <meta charset="utf-8" /> <title>Blade Demo</title> <style type="text/css"> @-webkit-keyframes itemFrame { from { -webkit-transform: translateY(-80px); } to { -webkit-transform: translate(0); } } * { margin: 0; padding: 0; } #demo li { list-style: none; border: 1px solid black; margin: 10px; padding: 10px; } .animateItem { -webkit-animation: itemFrame 1s ; } </style> <script type="text/javascript" src="http://sandbox.runjs.cn/js/sandbox/other/zepto.min.js"></script> </head> <body> <ul id="demo"> </ul> <script> var el = $('#demo'); for(var i = 0; i < 10; i++) { var li = $('<li>项目_' + i); el.append(li); } var items = $('#demo li'); function animatFn() { $.each(items, function (i) { var el = $(this); el.css('-webkit-animation-delay', i * 50 + 'ms'); el.addClass('animateItem'); }) } items.on('webkitAnimationEnd', function () { items.removeClass('animateItem'); items.css('-webkit-animation-delay', ''); }); animatFn(); /* setInterval(function () { animatFn(); }, 3000) */ </script> </body> </html>