samhstn/fade-in.html

## fade-in.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.container {
  position: relative;
}
.one, .two {
  font-size: 5rem;
}
.one {
  position: absolute;
  opacity: 1;
}
.two {
  opacity: 0;
}
.show {
  opacity: 1;
  animation: fadeIn 4s;
}
.hide {
  opacity: 0;
  animation: fadeOut 4s;
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
</style>
</head>
<body>

<div class="container">
  <div id="one" class="one">One</div>
  <div id="two" class="two">Two</div>
  <button onclick="change()">Change</button>
</div>

<script>
  function change() {
    const one = document.querySelector('#one')
    const two = document.querySelector('#two')
    one.classList.add('hide')
    two.classList.add('show')
  }
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Page Title</title>
	<style>
	.container {
	position: relative;
	}
	.one, .two {
	font-size: 5rem;
	}
	.one {
	position: absolute;
	opacity: 1;
	}
	.two {
	opacity: 0;
	}
	.show {
	opacity: 1;
	animation: fadeIn 4s;
	}
	.hide {
	opacity: 0;
	animation: fadeOut 4s;
	}
	@keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
	}
	@keyframes fadeOut {
	0% { opacity: 1; }
	100% { opacity: 0; }
	}
	</style>
	</head>
	<body>

	<div class="container">
	<div id="one" class="one">One</div>
	<div id="two" class="two">Two</div>
	<button onclick="change()">Change</button>
	</div>

	<script>
	function change() {
	const one = document.querySelector('#one')
	const two = document.querySelector('#two')
	one.classList.add('hide')
	two.classList.add('show')
	}
	</script>
	</body>
	</html>