<header>
  <p>Header</p>
</header>

<div id="news">
  <p>News list</p>
</div>

<div id="about">
  <p>Overview</p>
</div>

<div id="products">
  <p>Product list</p>
  
  <div class="flex">
    <div class="product01">
      <p>Product01</p>
    </div>
    <div class="product02">
      <p>Product02</p>
    </div>
    <div class="product03">
      <p>Product03</p>
    </div>
    <div class="product04">
      <p>Product04</p>
    </div>
   </div>
</div>

<div id="company">
  <p>Company Information</p>
</div>

<footer>
  <p>Footer</p>
</footer>
body {
  font-family: 'Caveat', cursive;
  color: #5d5d5d;
  font-size: 20px;
  line-height: 1rem;
}

header,
footer{
  width: 100%;
  height: 40px;
  background: #ffd580;
  text-align: center;
  padding: 100px 0;
  margin: 5px 0;
}

#news {
  width: 100%;
  height: 40px;
  background: #b3e2b4;
  text-align: center;
  padding: 80px 0;
  margin-bottom: 5px;
  opacity: 0;
  
  &.news-anime {
    animation: news 1.5s ease 1 normal;
    opacity: 1;
  }
}

@keyframes news {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#about {
  width: 100%;
  height: 40px;
  background: #abe7ff;
  text-align: center;
  padding: 150px 0;
  margin-bottom: 5px;
  opacity: 0;
  
  &.about-anime {
    animation: about 1.5s ease-out 1 normal;
    opacity: 1;
  }
}
@keyframes about {
  0% {
    transform: translateX(-100%) skewX(30deg);
  }
  80% {
    transform: translateX(0%);
  }
  85% {
    transform: translateX(-5%) skewX(20deg);
  }
  90% {
    transform: translateX(0%);
  }
  93% {
    transform: translateX(-2%) skewX(10deg);
  }
  100% {
    transform: translateX(0%);
  }
}

#products {
  width: 100%;
  height: 230px;
  background: #b8b2ea;
  text-align: center;
  padding: 10px 0;
  margin-bottom: 5px;
  opacity: 0;
  
  &.products-anime {
    animation: products 1.5s ease-out 1 normal;
    opacity: 1;
  }
  
  .flex {
    display: flex;
    flex-wrap: wrap;
  
    .product01,
    .product02,
    .product03,
    .product04{
      width: 23%;
      height: 50px;
      background: rgba(255, 255, 255, 0.6);
      padding: 60px 0;
      margin: 0 1%;
      opacity: 0;
      
      &.product-content-anime {
        animation: product-content 2s ease-out 1 normal;
        opacity: 1;
      }
    }
  }
}
@keyframes products {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}
@keyframes product-content {
  0% {
    opacity: 0;
    
  }
  60% {
    opacity: 0;
    transform: rotateZ(0deg) scale(0.6);
  }
  80% {
    opacity: 1; 
  }
  100% {
    transform: rotateZ(360deg)scale(1);
  }
}

#company {
  width: 100%;
  height: 20px;
  background: #ff7d7d;
  text-align: center;
  padding: 150px 0;
  margin-bottom: 5px;
  opacity: 0;
  
  &.company-anime {
    animation: company 0.8s ease-in 1 normal;
    opacity: 1;
  }
}
@keyframes company {
  0% {
    opacity: 0;
    transform: translateY(200px) skewY(10deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
View Compiled 
$(function(){
  $(window).scroll(function (){
    $("#news").each(function(){
      var animeCont = $(this).offset().top;
      var scroll = $(window).scrollTop();
      var windowHeight = $(window).height();
      if (scroll > animeCont - windowHeight + windowHeight/7){
        $(this).addClass("news-anime");
      }
    });
    
    $("#about").each(function(){
      var animeCont = $(this).offset().top;
      var scroll = $(window).scrollTop();
      var windowHeight = $(window).height();
      if (scroll > animeCont - windowHeight + windowHeight/7){
        $(this).addClass("about-anime");
      }
    });
    
    $("#products").each(function(){
      var animeCont = $(this).offset().top;
      var scroll = $(window).scrollTop();
      var windowHeight = $(window).height();
      if (scroll > animeCont - windowHeight + windowHeight/7){
        $(this).addClass("products-anime");
      }
    });
    
    $(".product01, .product02, .product03, .product04").each(function(){
      var animeCont = $(this).offset().top;
      var scroll = $(window).scrollTop();
      var windowHeight = $(window).height();
      if (scroll > animeCont - windowHeight + windowHeight/7){
        $(this).addClass("product-content-anime");
      }
    });
    
    $("#company").each(function(){
      var animeCont = $(this).offset().top;
      var scroll = $(window).scrollTop();
      var windowHeight = $(window).height();
      if (scroll > animeCont - windowHeight + windowHeight/7){
        $(this).addClass("company-anime");
      }
    });
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js