Only CSS: Light Wave

index.pug

.sea
  - for (i = 0; i < 100; i++)
    .wave
      .wave_fade
        .wave_translate
          .wave_skew
            .wave_graphic

only-css-light-wave.markdown

Only CSS: Light Wave

Something :)

A Pen by Yusuke Nakaya on CodePen.

License.

style.scss

$waveCount: 100;
$waveDuration: 2000ms;
$waveSkew: 17.5deg;
$waveTranslate: 100px;
$waveWidth: 10px;
$waveHeight: 30px;
$waveColor: linear-gradient(180deg, rgba(150, 220, 255, 0.5), rgba(150, 220, 255, 0.2));

body {
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  height: 100vh;
  overflow: hidden;
  display: flex;
  font-family: 'Anton', sans-serif;
  justify-content: center;
  align-items: center;
}

.sea {
  display: flex;
  filter: drop-shadow(0 -7px 10px #fff) blur(3px) contrast(5);
}

.wave {
  &_graphic {
    width: $waveWidth;
    height: $waveHeight;
    background: $waveColor;
  }
  
  &_fade {
    animation: fade $waveDuration * 0.7 ease-in-out infinite alternate;
  }
  
  &_skew {
    animation: skew $waveDuration ease-in-out infinite alternate;
  }
  
  &_translate {
    animation: translate $waveDuration ease-in-out infinite alternate;
  }
  
  @for $i from 1 through $waveCount {
    &:nth-child(#{$i}) &_fade {
      animation-delay: $i * -$waveDuration / $waveCount;
    }
    &:nth-child(#{$i}) &_skew {
      animation-delay: $i * -$waveDuration / $waveCount;
    }
    
    &:nth-child(#{$i}) &_translate {
      animation-delay: $i * -$waveDuration / $waveCount - $waveDuration / 2;
    }
  }
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  
  5% {
    opacity: 0;
  }
  
  100% {
    opacity: 1;
  }
}

@keyframes skew {
  0% {
    transform: skewY(-$waveSkew);
  }
  
  100% {
    transform: skewY($waveSkew);
  }
}

@keyframes translate {
  0% {
    transform: translateY($waveTranslate);
  }
  
  100% {
    transform: translateY(-$waveTranslate);
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet" />