CSS3动画效果应用

html>
head>
  meta charset="utf-8" />
  title>Blade Demotitle>
  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 = $(‘
项目_‘ + 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>