css3 - google design 效果？

Question

https://design.google.com/art...

想問下
他點每一個頁面後
除了背景
字跟物件
會fadeInUp出現
往下移之後每個區塊的圖也會fadeInUp（手機也會）
這該怎麼做呢？

Answer 1

<link rel="stylesheet" href="css/animate.css" />

<p class="wow slideInUp" data-wow-duration="1s">

<p class="card horizontal">
    <p class="card-image">
        <i class="ion ionicons ion-clock ion-4x blue-text"></i>
    </p>
    <p class="card-stacked">
        <p class="card-content">
            <h5 class="header st">内容标题</h5>
            <p>内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题</p>
        </p>
    </p>
</p>

</p>

<script type="text/javascript" src="http://code.jquery.com/jquery...
<script>window.jQuery || document.write('<script src="js/jquery.min.js"></script>')</script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="js/wow.js" ></script>
<script>

//页面滚动动画效果
var wow = new WOW({
  boxClass: 'wow',
  animateClass: 'animated',
  offset: 100,
  mobile: true,
  live: true
});
wow.init();

</script>

mobile:true; 即代表手机端也支持滚动动画特效。