Yatch animation

by koljada

HTML

<div id="container">
  <div class="layer sky"></div>
  <div class="layer cloud clouds2"></div>
  <div class="layer cloud clouds1"></div>
  <div class="layer gulls gulls1"></div>
  <div class="layer gulls gulls2"></div>
  <div class="layer gulls gulls3"></div>
  <div class="layer gulls gulls4"></div>
  <div class="layer gulls gulls5"></div>
  <div class="layer wave wave7"></div>
  <div class="layer boat staysail"></div>
  <div class="layer boat mainsail"></div>
  <div class="layer boat yatch"></div>
  <div class="layer wave wave6"></div>
  <div class="layer wave wave5"></div>
  <div class="layer wave wave4"></div>
  <div class="layer wave wave3"></div>
  <div class="layer wave wave2"></div>
  <div class="layer wave wave1"></div>
</div>
<div class="content"></div>

SCSS

$cloudsRadius: 25px;
body {
  padding: 0;
  margin: 0;
}

#container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.layer {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100%;
  position: absolute;
  z-index: 0;
  width: calc(100% + 24px);
  overflow: hidden;
  margin: 0 -12px;
}

@each $image in 'gulls1',
'gulls2',
'gulls3',
'gulls4',
'gulls5',
'staysail',
'mainsail',
'yatch',
'sky',
'clouds1',
'clouds2',
'wave1',
'wave2',
'wave3',
'wave4',
'wave5',
'wave6',
'wave7' {
  $imageUrl: 'https://firebasestorage.googleapis.com/v0/b/wedding-42174.appspot.com/o/animation%2F' + $image + '.png?alt=media';
  .#{$image} {
    background-image: url($imageUrl);
  }
}

@mixin keyframe($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes#{$name} {
    @content;
  }
  @-o-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content
  }
}

@mixin circle($radius) {
  @include keyframe("circle" + $radius) {
    from {
      transform: rotate(0deg) translateX($radius) rotate(0deg);
    }
    to {
      transform: rotate(360deg) translateX($radius) rotate(-360deg);
    }
  }
}

@mixin animations($animations...) {
  $animation: '';
  @each $a in $animations {
    $animation: $animation + ", "+ $a;
  }
  $animation: str-slice($animation, 2);
  -webkit-animation: #{$animation};
  -moz-animation: #{$animation};
  -o-animation: #{$animation};
  animation: #{$animation};
}

@include circle($cloudsRadius);
.clouds1 {
  @include animations("circle" + $cloudsRadius +' 60s linear infinite alternate-reverse');
}

@include keyframe('waves') {
  from {
    transform: translateX(0px) skew(0deg);
  }
  to {
    transform: translateX(8px) skew(-0.5deg, 0.2deg);
  }
}

.wave {
  @include animations('waves 2s infinite ease-out both alternate');
  &:nth-child(2n) {
    animation-delay: 1s;
  }
}

@include keyframe('heaving') {
  from {
    transform: translate(0, 0) rotate(0);
 ...