图像序列动画来模拟奇迹介绍

Question

我想创建一个动画来模拟Marvel comic intro，而是用自己的图像。我不确定是否将动画创建为视频并将其嵌入到我的网页中，或者如果我可以使用jQuery/Velocity来实现此效果？

我提前道歉，如果这个问题太模糊或不使用的很多人，但我在努力寻找通过谷歌搜索的解决方案。

提前感谢这一个任何帮助/方向。

Answer 1

对于任何人谁是有兴趣的，我这是怎么实现的接近我想要的东西，在此基础上小提琴：http://jsfiddle.net/ddrace/DJuV7/1/

#intro { 
position: relative; 
margin:auto; 
top: 50px; 
right: 0; 
bottom: 0; 
left: 0; 
height: 600px; 
width:800px; 
background: #fff; 
} 

#intro div { 
    position: absolute; 
    top: -360px; 
} 

<script> 
    $(function() { 
     $('.image-sequence').hide(); 

     var pause = 200; 
     var motion = 300; 

     var quotes = $('.image-sequence'); 
     var count = quotes.length; 
     var i = 0; 

     setTimeout(transition, pause); 

     function transition() {     
      quotes.eq(i).animate({ opacity: 'toggle', top: '0' }, motion); 

      i++; 

      if (i == count) return; 

      setTimeout(transition, pause); 
     } 
    }); 
</script> 

<div id="intro"> 
<div class="image-sequence"> 
    <img src="~/Images/relational-sequence-1.jpg"> 
</div> 
<div class="image-sequence"> 
    <img src="~/Images/relational-sequence-2.jpg"> 
</div> 
<div class="image-sequence"> 
    <img src="~/Images/relational-sequence-3.jpg"> 
</div> 
<div class="image-sequence"> 
    <img src="~/Images/relational-sequence-4.jpg"> 
</div> 
<div class="image-sequence"> 
    <img src="~/Images/relational-sequence-5.jpg"> 
</div> 
<div class="image-sequence"> 
    <img src="~/Images/relational-sequence-6.jpg"> 
</div> 
<div class="image-sequence"> 
    <img src="~/Images/relational-sequence-7.jpg"> 
</div> 
<div class="image-sequence"> 
    <img src="~/Images/relational-sequence-8.jpg"> 
</div> 
<div class="image-sequence"> 
    <img src="~/Images/relational-sequence-9.jpg"> 
</div> 
<div class="image-sequence"> 
    <img src="~/Images/relational-sequence-10.jpg"> 
</div> 
<div class="image-sequence"> 
    <img src="~/Images/relational-sequence-11.jpg"> 
</div> 
<div class="image-sequence"> 
    <img src="~/Images/relational-sequence-12.jpg"> 
</div> 
<div class="image-sequence"> 
    <img src="~/Images/relational-sequence-13.jpg"> 
</div> 
<div class="image-sequence"> 
    <img src="~/Images/relational-sequence-14.jpg"> 
</div> 
<div class="image-sequence"> 
    <img src="~/Images/relational-sequence-15.jpg"> 
</div> 
<div class="image-sequence"> 
    <img src="~/Images/relational-sequence-16.jpg"> 
</div>