h1 Water Waves

div class="container"
  - for i in (1..480)
    div class="line" 
    

@import url(https://fonts.googleapis.com/css?family=Lobster);
$delay = 0.002
$size = 4
*
  margin: 0
  padding: 0
  box-sizing: border-box

h1
  color: #fff
  font-family: "Lobster", cursive
  font-size: 5em
  text-align: center
  line-height: 100vh
  z-index: 2
  position:relative
body
  background: #111
  overflow: hidden
.container
  position: absolute
  width: 100%
  height: 1px
  bottom: -2px
  left: -4px

.line
  background: #46a1de
  width: ($size)px
  height: 1px
  float: left
  animation: wave 1s infinite ease-in-out alternate
  z-index: 1
  position:absolute
  
for $i in (1..480) 
  .line:nth-child({$i})
    animation-delay:($delay*$i)s;
    left: ($size*$i)px;

@keyframes wave {
  0%{
    transform: translateY(-10px);
    height: 11px;}
  100%{
    transform: translateY(-100px);
    height: 100px;}
}

//.child:nth-child(2){animation-delay:0.2s;}
//