HTML Element Style How to - Animate list item to fly in with fading

Question

We would like to know how to animate list item to fly in with fading.

Answer


<!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 {<!--   w  ww .  j  a  va  2 s.c  o m-->
  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>

The code above is rendered as follows: