首页 > html > ui_ol > HTML Element Style - 如何动画列表项与褪色飞行

HTML Element Style - 如何动画列表项与褪色飞行

ui_ol 【ui_ol】
我们想知道如何动画列表项与褪色飞行。
代码展示 运行结果 

<!DOCTYPE html>
<html>
<head>
<title>Flexslider with CSS3 Animation - jsFiddle demo by fastone</title>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-1.6.4.js'></script>
<style type='text/css'>
.flex-caption {
  position: relative;
  -webkit-animation: slideIn;
  -moz-animation: slideIn;
  -o-animation: slideIn;
  animation: slideIn;
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  -o-animation-duration: 2s;
  animation-duration: 2s;
}

@-webkit-keyframes slideIn { 
  0% {left: 9%;opacity: 0;}
  100%{left: 0;opacity:1;}
}
@-moz-keyframes slideIn { 
  0% {left: 9%;opacity: 0;}
  100%{left:0;opacity:1;}
}
@-o-keyframes slideIn { 
  0% {left: 9%;opacity: 0;}
  100%{left:0;opacity:1;}
}
@keyframes slideIn { 
   0% {left: 9%;opacity: 0;}
   100%{left:0;opacity:1;}
}
</style>
<script type='text/javascript'>
$(window).load(function () {
    $('.flexslider').flexslider({
        animation: "slide"
    });
});
</script>
</head>
<body>
  <div class="flexslider">
    <ul class="slides">
      <li><p class="flex-caption">First Image</p></li>
      <li><p class="flex-caption">Second Image</p></li>
      <li><p class="flex-caption">Third Image</p></li>
      <li><p class="flex-caption">Fourth Image</p></li>
    </ul>
  </div>
</body>
</html>