Анимация “подпрыгивание” экрана

$(document).ready(function(){ 
  $('.anim').bind('click', function(){ 
    $("HTML, BODY").animate({ 
      scrollTop: $('body').height() 
    }, 300, function() { 
      $("HTML, BODY").animate({ 
        scrollTop: 0 
      }, 300) 
    }); 
  }); 
});

.anim{ 
  cursor: pointer; 
} 
.red{ 
  color: red; 
} 
.green{ 
  color: green; 
} 
.blue{ 
  color: blue; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="container"> 
  <button class="anim">click me</button> 
  <p class="red"> 
    What is Lorem Ipsum? 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
  </p> 
  <p class="green"> 
    What is Lorem Ipsum? 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
  </p> 
  <p class="blue"> 
    What is Lorem Ipsum? 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
  </p> 
  <p class="red"> 
    What is Lorem Ipsum? 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
  </p> 
  <p class="green"> 
    What is Lorem Ipsum? 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
  </p> 
  <p class="blue"> 
    What is Lorem Ipsum? 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
  </p> 
</div>

$(document).ready(function(){ 
  $('.anim').bind('click', function(){ 
    $('.anim-container').addClass('css3-notification'); 
    //Это просто удаляет класс влияющий на анимацию 
    //Если не нужно то не надо вставить в ваш код 
    //Здесь для того что бы демострировать клик на много раз 
    setTimeout(function(){ 
      $('.anim-container').removeClass('css3-notification'); 
    },2000); 
  }); 
});

.anim{ 
  margin-bottom: 10px; 
} 
.css3-notification { 
  -webkit-animation: bounce 800ms ease-out; 
  -moz-animation: bounce 800ms ease-out; 
  -o-animation: bounce 800ms ease-out; 
  animation: bounce 800ms ease-out; 
} 
 
/* Webkit, Chrome и Safari */ 
 
@-webkit-keyframes bounce { 
  0% { 
  -webkit-transform:translateY(-100%); 
    opacity: 0; 
  } 
  5% { 
    -webkit-transform:translateY(-100%); 
    opacity: 0; 
  } 
  15% { 
    -webkit-transform:translateY(0); 
    padding-bottom: 5px; 
  } 
  30% { 
    -webkit-transform:translateY(-50%); 
  } 
  40% { 
    -webkit-transform:translateY(0%); 
    padding-bottom: 6px; 
  } 
  50% { 
    -webkit-transform:translateY(-30%); 
  } 
  70% { 
    -webkit-transform:translateY(0%); 
    padding-bottom: 7px; 
  } 
  80% { 
    -webkit-transform:translateY(-15%); 
  } 
  90% { 
    -webkit-transform:translateY(0%); 
    padding-bottom: 8px; 
  } 
  95% { 
    -webkit-transform:translateY(-10%); 
  } 
  97% { 
    -webkit-transform:translateY(0%); 
    padding-bottom: 9px; 
  } 
  99% { 
    -webkit-transform:translateY(-5%); 
  } 
  100% { 
    -webkit-transform:translateY(0); 
    padding-bottom: 9px; 
    opacity: 1; 
  } 
} 
 
/* Mozilla Firefox 15 и старше */ 
@-moz-keyframes bounce { 
  0% { 
  -moz-transform:translateY(-100%); 
    opacity: 0; 
  } 
  5% { 
    -moz-transform:translateY(-100%); 
    opacity: 0; 
  } 
  15% { 
    -moz-transform:translateY(0); 
    padding-bottom: 5px; 
  } 
  30% { 
    -moz-transform:translateY(-50%); 
  } 
  40% { 
    -moz-transform:translateY(0%); 
    padding-bottom: 6px; 
  } 
  50% { 
    -moz-transform:translateY(-30%); 
  } 
  70% { 
    -moz-transform:translateY(0%); 
    padding-bottom: 7px; 
  } 
  80% { 
    -moz-transform:translateY(-15%); 
  } 
  90% { 
    -moz-transform:translateY(0%); 
    padding-bottom: 8px; 
  } 
  95% { 
    -moz-transform:translateY(-10%); 
  } 
  97% { 
    -moz-transform:translateY(0%); 
    padding-bottom: 9px; 
  } 
  99% { 
    -moz-transform:translateY(-5%); 
  } 
  100% { 
    -moz-transform:translateY(0); 
    padding-bottom: 9px; 
    opacity: 1; 
  } 
} 
 
/* Opera 12.0 */ 
@-o-keyframes bounce { 
  0% { 
  -o-transform:translateY(-100%); 
    opacity: 0; 
  } 
  5% { 
    -o-transform:translateY(-100%); 
    opacity: 0; 
  } 
  15% { 
    -o-transform:translateY(0); 
    padding-bottom: 5px; 
  } 
  30% { 
    -o-transform:translateY(-50%); 
  } 
  40% { 
    -o-transform:translateY(0%); 
    padding-bottom: 6px; 
  } 
  50% { 
    -o-transform:translateY(-30%); 
  } 
  70% { 
    -o-transform:translateY(0%); 
    padding-bottom: 7px; 
  } 
  80% { 
    -o-transform:translateY(-15%); 
  } 
  90% { 
    -o-transform:translateY(0%); 
    padding-bottom: 8px; 
  } 
  95% { 
    -o-transform:translateY(-10%); 
  } 
  97% { 
    -o-transform:translateY(0%); 
    padding-bottom: 9px; 
  } 
  99% { 
    -o-transform:translateY(-5%); 
  } 
  100% { 
    -o-transform:translateY(0); 
    padding-bottom: 9px; 
    opacity: 1; 
  } 
} 
 
/* W3, Opera 12+, Firefox 16+ */ 
@keyframes bounce { 
  0% { 
  transform:translateY(-100%); 
    opacity: 0; 
  } 
  5% { 
    transform:translateY(-100%); 
    opacity: 0; 
  } 
  15% { 
    transform:translateY(0); 
    padding-bottom: 5px; 
  } 
  30% { 
    transform:translateY(-50%); 
  } 
  40% { 
    transform:translateY(0%); 
    padding-bottom: 6px; 
  } 
  50% { 
    transform:translateY(-30%); 
  } 
  70% { 
    transform:translateY(0%); 
    padding-bottom: 7px; 
  } 
  80% { 
    transform:translateY(-15%); 
  } 
  90% { 
    transform:translateY(0%); 
    padding-bottom: 8px; 
  } 
  95% { 
    transform:translateY(-7%); 
  } 
  97% { 
    transform:translateY(0%); 
    padding-bottom: 9px; 
  } 
  99% { 
    transform:translateY(-3%); 
  } 
  100% { 
    transform:translateY(0); 
    padding-bottom: 9px; 
    opacity: 1; 
  } 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<!doctype html> 
<html> 
<head> 
  <title>Эффект отскока на CSS3 | Материалы сайта RUSELLER.COM</title> 
  <meta charset="utf-8"> 
  <link rel="stylesheet" href="css/normalize.css"> 
  <link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 
  <div class="demo-wrapper css3-bounce-effect"> 
    <button class="anim">click me</button> 
    <div class="anim-container"> 
      <p class="red"> 
    What is Lorem Ipsum? 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
  </p> 
  <p class="green"> 
    What is Lorem Ipsum? 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
  </p> 
  <p class="blue"> 
    What is Lorem Ipsum? 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
  </p> 
    </div> 
     
  </div> 
</body> 
</html>