CSS3动画效果应用

关键帧动画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>

 

posted @ 2017-10-28 16:16  learn_by_doing  阅读(194)  评论(0)  编辑  收藏  举报