关键帧动画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>CSS3动画效果应用
原文地址：http://www.cnblogs.com/chenyongyang/p/7747237.html