bennpearson/index.html

## index.html
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Wave 1 - Hypnogogic</title>


      <style>
      body {
  margin: 0;
}

body {
  margin: 0;
}
.wrapper {
  width: 500px;
  height:100px;
  margin: auto;
  perspective: 600px;
}
.sea {
  transform: rotateX( 45deg );

}
.row {
  background: #fff;;
  height: 5vh;
  width: 100%;
  animation: fade 5s infinite;
  animation-direction: alternate;
}
.row-1 {
}
.row-2 {
  animation-delay:0.5s;
}
.row-3 {
  animation-delay:1s;
}
.row-4 {
  animation-delay:1.5s;
}
.row-5 {
  animation-delay:2s;
}
.row-6 {
  animation-delay:2.5s;
}
.row-7 {
  animation-delay:3s;
}
.row-8 {
  animation-delay:3.5s;
}

.row-9 {
  animation-delay:4s;
}
.row-10 {
  animation-delay:4.5s;
}
.row-11 {
  animation-delay:5s;
}
.row-12 {
  animation-delay:5.5s;
}
.row-13 {
  animation-delay:6s;
}
.row-14 {
  animation-delay:6.5s;
}
.row-15 {
  animation-delay:7s;
}
.row-16 {
  animation-delay:7.5s;
}
.row-17 {
  animation-delay:8s;
}
.row-18 {
  animation-delay:8.5s;
}

.row-19 {
  animation-delay:9s;
}
.row-20 {
  animation-delay:9.5s;
}


@keyframes fade {
  from { background: #000; }
  to { background: #eee; }
}
    </style>


</head>

<body>

  <div class="wrapper">
    <div class="sea">
  <div class="row-1 row"></div>
  <div class="row-2 row"></div>
  <div class="row-3 row"></div>
  <div class="row-4 row"></div>
  <div class="row-5 row"></div>
  <div class="row-6 row"></div>
  <div class="row-7 row"></div>
  <div class="row-8 row"></div>
  <div class="row-9 row"></div>
  <div class="row-10 row"></div>
  <div class="row-11 row"></div>
  <div class="row-12 row"></div>
  <div class="row-13 row"></div>
  <div class="row-14 row"></div>
  <div class="row-15 row"></div>
  <div class="row-16 row"></div>
  <div class="row-17 row"></div>
  <div class="row-18 row"></div>
  <div class="row-19 row"></div>
  <div class="row-20 row"></div>
  </div></div>


</body>

</html>
	<!DOCTYPE html>
	<html lang="en" >

	<head>
	<meta charset="UTF-8">
	<title>Wave 1 - Hypnogogic</title>



	<style>
	body {
	margin: 0;
	}

	body {
	margin: 0;
	}
	.wrapper {
	width: 500px;
	height:100px;
	margin: auto;
	perspective: 600px;
	}
	.sea {
	transform: rotateX( 45deg );

	}
	.row {
	background: #fff;;
	height: 5vh;
	width: 100%;
	animation: fade 5s infinite;
	animation-direction: alternate;
	}
	.row-1 {
	}
	.row-2 {
	animation-delay:0.5s;
	}
	.row-3 {
	animation-delay:1s;
	}
	.row-4 {
	animation-delay:1.5s;
	}
	.row-5 {
	animation-delay:2s;
	}
	.row-6 {
	animation-delay:2.5s;
	}
	.row-7 {
	animation-delay:3s;
	}
	.row-8 {
	animation-delay:3.5s;
	}

	.row-9 {
	animation-delay:4s;
	}
	.row-10 {
	animation-delay:4.5s;
	}
	.row-11 {
	animation-delay:5s;
	}
	.row-12 {
	animation-delay:5.5s;
	}
	.row-13 {
	animation-delay:6s;
	}
	.row-14 {
	animation-delay:6.5s;
	}
	.row-15 {
	animation-delay:7s;
	}
	.row-16 {
	animation-delay:7.5s;
	}
	.row-17 {
	animation-delay:8s;
	}
	.row-18 {
	animation-delay:8.5s;
	}

	.row-19 {
	animation-delay:9s;
	}
	.row-20 {
	animation-delay:9.5s;
	}



	@keyframes fade {
	from { background: #000; }
	to { background: #eee; }
	}
	</style>


	</head>

	<body>

	<div class="wrapper">
	<div class="sea">
	<div class="row-1 row"></div>
	<div class="row-2 row"></div>
	<div class="row-3 row"></div>
	<div class="row-4 row"></div>
	<div class="row-5 row"></div>
	<div class="row-6 row"></div>
	<div class="row-7 row"></div>
	<div class="row-8 row"></div>
	<div class="row-9 row"></div>
	<div class="row-10 row"></div>
	<div class="row-11 row"></div>
	<div class="row-12 row"></div>
	<div class="row-13 row"></div>
	<div class="row-14 row"></div>
	<div class="row-15 row"></div>
	<div class="row-16 row"></div>
	<div class="row-17 row"></div>
	<div class="row-18 row"></div>
	<div class="row-19 row"></div>
	<div class="row-20 row"></div>
	</div></div>



	</body>

	</html>