css content into effect gradually realized

 

sectionTop-in-.fade { 
  Opacity : 0 ; 
  Transform : translateY, (20vh) ; 
  visibility : hidden ; 
  Transition : Opacity 1200ms EASE-OUT, OUT-EASE Transform 600ms, 
  visibility 1200ms EASE-OUT ; 
  Will-Change : Opacity, Transform, visibility ; // animation performance optimization, do not use the next page is not particularly complex case, see: here
　　
} 
.fade-in-section.is-visible { 
  Opacity : . 1 ; 
  Transform : none ; 
  visibility : visible ; 
}

 

demo effects:

If you have frequent access to Apple's official website, you will find among them similar effects:

in the face of the official show web content, you can combine this effect will bring a more elegant presentation tips