<div class="sky">
  <div class="sun"></div>
  <div class="moon"></div>
  <div class="cloud"></div>  
  <div class="clouds"></div>
  <div class="water"></div>      
</div>
$ocean-blue: #2980b9;
$ocean-blue-light: lighten($ocean-blue, 10%);
$ocean-blue-lighter: lighten($ocean-blue, 15%);
$ocean-blue-dark: darken($ocean-blue, 10%);
$ocean-blue-darker: darken($ocean-blue, 15%);
$sun-yellow: #FBB829;
$sky-blue: #dfe9ef; 
$sky-blue-darker: darken($sky-blue, 10%);
$white: #fff;
$cloud-gray: #bdc3c7;
$moon-gray: linear-gradient(0deg, #ecf0f1, #fff);
$body-bg: #ecf0f1;
$animation-duration: 15s;

$z-index: (
  base: -1,
  level-1: 10,
  level-2: 20,
  level-3: 30,
  level-4: 40
);

@keyframes sky {
  0% {
    background-color: darken($sky-blue, 70%);    
  }
  25% {
    background-color: darken($sky-blue, 15%);        
  }
  50% {
    background-color: linear-gradient(0deg, $sky-blue, $sky-blue-darker);    
  }
  100% {
    background: darken($sky-blue, 75%);
  }
}

@keyframes moon {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  25% {
    transform: translateY(20em);
  }
  50% {
    transform: scale(1.25);
    transform: translateY(20em);      
  }
  100% {
    transform: translateX(1em) translateY(1em) scale(1.5);
  }
}

@keyframes sun {
  0% {
    transform: translateY(0);
  }
  25% {
    background: $sun-yellow;    
    transform: translateY(-20em) scale(1.5);
  }
  50% {
    background: $sun-yellow;    
    transform: translateY(-20em) translateX(-25em) scale(1.25);
  }
  100% {
    transform: translateY(0) translateX(-20em) scale(0.75);    
  }
}

@keyframes sail {
  0% {
    transform: translateX(0);    
  }
  25% {
    transform: translateX(10em) translateY(-1em);
  }
  50% {
    transform: translateX(20em) translateY(1em);    
  }
  100% {
    transform: translateX(30em) translateY(3em);
  }
}


@keyframes cloud {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(20em);
  }
  100% {
    transform: translateX(0);    
  }
}

%content{
  content: '';
}

%circle {
  height: 4em;
  width: 4em;
}

body {
  background: $body-bg;
  height: 100vh;
  margin-top: 2em;
  padding: 1em;
}

.sky {
  animation-name: sky;
  animation-duration: $animation-duration;
  animation-iteration-count: infinite;
  background: darken($sky-blue, 70%);
  box-shadow: 1px 1px 5px 1px rgba(50, 50, 50, 0.75);
  height: 26em;
  margin: 0 auto;
  max-width: 50em;  
  position: relative;
  transition: all 1s ease;
  z-index: map-get($z-index, base);
}

.sun {
  @extend %circle;
  animation-name: sun;
  animation-duration: $animation-duration;
  animation-iteration-count: infinite;
  background: darken($sun-yellow, 20%);
  border: 1px solid darken($sun-yellow, 10%);
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  right: 1em;
  transition: all 2s ease;
  z-index: map-get($z-index, level-1);
}

.moon {
  @extend %circle;
  animation-name: moon;
  animation-duration: $animation-duration;
  animation-iteration-count: infinite;
  background: $moon-gray;
  border-radius: 50%;  
  position: absolute;
  left: 1em;
  transition: all 2s ease;  
  top: 1em;
}

.cloud {
  animation-name: cloud;
  animation-duration: $animation-duration;
  animation-iteration-count: infinite;
  background: $cloud-gray;
  border-radius: 10em; 
	height: 3em;
  position: relative;
  top: 4em;
  left: 1em;
  transition: all 2s ease;
	width: 10em;
  z-index: map-get($z-index, level-3);
  
  &:before,
  &:after {
    @extend %content;
    background: $cloud-gray;
    position: absolute;
  }
  &:before {
    border-radius: 3em;
    height: 3em;
    left: 1em;
    top: -1em;
    width: 3em;    
  }
  &:after {
    border-radius: 3em;
    height: 5em;
    right: 2em;
    top: -2em;  
    width: 5em;    
  }
}

.water {
  background: $ocean-blue;
  background: linear-gradient(0deg, $ocean-blue-lighter, $ocean-blue-dark);
  bottom: 0;
  height: 8em;
  position: absolute;  
  transition: height 1s ease-in-out;
  width: 100%;
  z-index: map-get($z-index, level-2);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.