JSでフェードイン・フェードアウト 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>javascriptでfadoin</title>
		<style type="text/css">
		<!--
.selector{
	height: 200px;
	width: 300px;
}
.selector2{
	height: 200px;
	width: 300px;
	display: none;
}

		-->
		</style>
	</head>
	<body>
		<span id="btn">modal_display</span>

		<div id="box" class="selector">
		      <h1>ここが消えます</h1>
		</div>
		<div id="modal" class="selector2">
		      <h1>hello</h1>
		</div>

	<script>


function fadeOut(node, duration) {
  node.style.opacity = 1;

  var start = performance.now();
  
  requestAnimationFrame(function tick(timestamp) {
    // イージング計算式（linear）
    var easing = (timestamp - start) / duration;

    // opacityが0より小さくならないように
    node.style.opacity = Math.max(1 - easing, 0);
    
    // イージング計算式の値が1より小さいとき
    if (easing < 1) {
      requestAnimationFrame(tick);
    } else {
      node.style.opacity = '';
      node.style.display = 'none';
    }
  });
}


function fadeIn(node, duration) {
  // display: noneでないときは何もしない
  if (getComputedStyle(node).display !== 'none') return;
  
  // style属性にdisplay: noneが設定されていたとき
  if (node.style.display === 'none') {
    node.style.display = '';
  } else {
    node.style.display = 'block';
  }
  node.style.opacity = 0;

  var start = performance.now();
  
  requestAnimationFrame(function tick(timestamp) {
    // イージング計算式（linear）
    var easing = (timestamp - start) / duration;

    // opacityが1を超えないように
    node.style.opacity = Math.min(easing, 1);

    // opacityが1より小さいとき
    if (easing < 1) {
      requestAnimationFrame(tick);
    } else {
      node.style.opacity = '';
    }
  });
}

fadeOut(document.querySelector('.selector'), 100);
fadeIn(document.querySelector('.selector2'), 500);
	</script>
	</body>
</html>