CSS3 divが表示されたときの遷移

Question

ブートストラップまたはCSS3を使用して、div要素を徐々に表示するだけでなく下にスクロールすると、その要素を上にスライドさせる方法を教えてください。

@-webkit-keyframes easein 
 
{ 
 
    0% {opacity:0}; 
 
    100% {opacity:1}; 
 
} 
 
@keyframes easein 
 
{ 
 
    0% {opacity:0}; 
 
    100% {opacity:1}; 
 
} 
 
.ndd-easein 
 
{ 
 
    -webkit-animation-name:easein; /* Chrome, Safari, Opera */ 
 
    -webkit-animation-duration:1.5s; /* Chrome, Safari, Opera */ 
 
    animation-name:easein; 
 
    animation-duration:1.5s; 
 
    animation-timing-function:ease-in; 
 
}

Answer 1

このプラグインは非常に良い仕事をしていません：scrollrevealjs、これはjqueryの経由例アーカイブです：

$(document).ready(function() { 
 
    /* Every time the window is scrolled ... */ 
 
    $(window).scroll(function() { 
 
    /* Check the location of each desired element */ 
 
    $('.hideme').each(function(i) { 
 
     var bottom_of_object = $(this).offset().top + $(this).outerHeight(); 
 
     var bottom_of_window = $(window).scrollTop() + $(window).height(); 
 
     /* If the object is completely visible in the window, fade it it */ 
 
     if (bottom_of_window > bottom_of_object) { 
 
     $(this).animate({ 
 
      'opacity': '1' 
 
     }, 500); 
 
     } 
 
    }); 
 
    }); 
 
});

#container { 
 
    height: 2000px; 
 
} 
 

 
#container DIV { 
 
    margin: 50px; 
 
    padding: 50px; 
 
    background-color: lightgreen; 
 
} 
 

 
.hideme { 
 
    opacity: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div class="hideme">Fade In</div> 
 
    <div class="hideme">Fade In</div> 
 
    <div class="hideme">Fade In</div> 
 
    <div class="hideme">Fade In</div> 
 
    <div class="hideme">Fade In</div> 
 
    <div class="hideme">Fade In</div> 
 
    <div class="hideme">Fade In</div> 
 
</div>