.canvas {
  position: relative;

  width: 500px;
  height: 380px;
  margin: 0 auto;

  transition: .3s ease;

  perspective: 800px;
}

.box_front {
  position: relative;

  overflow: hidden;

  width: 500px;
  height: 380px;

  background: skyblue;
  box-shadow: 0 -400px 300px -300px steelblue inset;

  animation: time 120s linear infinite;
}

/*TODO
Цвета неба задаются следующими свойствами:
    День:
        background: skyblue;
        box-shadow: 0 -400px 300px -300px steelblue inset;
    Вечер:
        background: darkslateblue;
        box-shadow: 0 -400px 300px -300px orangered inset;
    Ночь:
        background: darkslateblue;
        box-shadow: 0 -400px 300px -300px transparent inset;

Нужно реализовать плавный переход между ними и зациклить его.
*/

@keyframes time {
  0% {
    background: skyblue;
    box-shadow: 0 -400px 300px -300px steelblue inset;
  }

  25% {
    background: skyblue;
    box-shadow: 0 -400px 300px -300px steelblue inset;
  }

  50% {
    background: darkslateblue;
    box-shadow: 0 -400px 300px -300px orangered inset;
  }

  75% {
    background: darkslateblue;
    box-shadow: 0 -400px 300px -300px transparent inset;
  }

  100% {
    background: skyblue;
    box-shadow: 0 -400px 300px -300px steelblue inset;
  }
}

.ship::after {
  position: absolute;
  bottom: 0;
  left: 0;

  width: 100px;
  height: 20px;

  content: '';

  border-radius: 0 0 0 20px;
  background: #e25c45;
}

.ship::before {
  position: absolute;
  top: 0;
  left: 10px;

  width: 65px;
  height: 16px;

  content: '';

  border-radius: 20px 0 0 0;
  background: #fff;
}

.ship {
  position: absolute;
  right: 0;
  bottom: 30px;

  width: 100px;
  height: 36px;

  transform: translateX(100px);

  animation: ship 55s linear 3s infinite;
}

@keyframes ship {
  0% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(-550px);
  }
}

.ship_smokestack {
  position: absolute;
  bottom: 36px;
  left: 45px;

  width: 10px;
  height: 17px;

  background: #a18e6e;
}

.ship_window {
  position: absolute;
  top: 6px;
  left: 40px;

  width: 7px;
  height: 7px;

  border-radius: 50%;
  background: #a18e6e;
  box-shadow: 13px 0 0 0 #a18e6e, -13px 0 0 0 #a18e6e;
}

.smoke div {
  position: absolute;

  width: 7px;
  height: 7px;

  border-radius: 50%;
  background: #fff;
}

.smoke-1 {
  top: -25px;
  right: 44px;

  opacity: 0;
  animation: smoke 3s ease-out infinite;
}

.smoke-2 {
  top: -25px;
  right: 42px;

  opacity: 0;
  animation: smoke 3s ease-out 1s infinite;
}

.smoke-3 {
  top: -25px;
  right: 49px;

  opacity: 0;
  animation: smoke 3s ease-out .5s infinite normal;
}

@keyframes smoke {
  0%, 10% {
    opacity: 0;
    transform: translateX(0) translateY(0) scale(1);
    box-shadow: 0 0 1px 0 #fff;
  }
  25% {
    opacity: 1;
    transform: translateX(0) translateY(-5px) scale(1.1);
    box-shadow: 0 0 3px 1px #fff;
  }
  50% {
    opacity: .1;
    transform: translateX(5px) translateY(-20px) scale(1.5);
    box-shadow: 0 0 5px 3px #fff;
  }
  100% {
    opacity: 0;
    transform: translateX(10px) translateY(-30px) scale(2);
    box-shadow: 0 0 7px 5px #fff;
  }
}

.sun {
  position: absolute;
  top: 30px;
  right: 50%;

  width: 80px;
  height: 80px;

  border-radius: 50%;
  background: #ffcf11;
  box-shadow: 0 0 100px #ffdf05;

  animation: turn 30s linear infinite;
}

@keyframes turn {
  100% {
    transform: rotate(360deg);
  }
}

.sun-wrapper {
  position: absolute;

  width: 100%;
  height: 100%;


  transform-origin: bottom center;
  animation: sun-turn 120s linear infinite;
}

@keyframes sun-turn {
  0% {
    transform: rotate(-80deg);
  }
  100% {
    transform: rotate(.8turn);
  }
}

.sun div {
  position: absolute;
  top: -20px;
  left: 50%;

  width: 2px;
  height: 100px;
  margin-left: -1px;

  border: solid #ffcf11;
  border-width: 10px 0 10px 0;
}

.sun div:nth-child(2) {
  transform: rotate(18deg);
}

.sun div:nth-child(3) {
  transform: rotate(36deg);
}

.sun div:nth-child(4) {
  transform: rotate(54deg);
}

.sun div:nth-child(5) {
  transform: rotate(72deg);
}

.sun div:nth-child(6) {
  transform: rotate(90deg);
}

.sun div:nth-child(7) {
  transform: rotate(-18deg);
}

.sun div:nth-child(8) {
  transform: rotate(-36deg);
}

.sun div:nth-child(9) {
  transform: rotate(-54deg);
}

.sun div:nth-child(10) {
  transform: rotate(-72deg);
}

.cloud {
  position: absolute;
  left: -180px;

  width: 200px;
  height: 60px;

  opacity: .8;
  border-radius: 200px;
  background: #fff;
}

.cloud:before,
.cloud:after {
  position: absolute;
  top: -15px;
  left: 10px;

  width: 100px;
  height: 80px;

  content: '';

  border-radius: 100px;
  background: #fff;
}

.cloud:after {
  top: -55px;
  right: 15px;
  left: auto;

  width: 120px;
  height: 120px;
}

.cloud-1 {
  top: 10px;

  animation: cloud-1 40s linear infinite;
}

@keyframes cloud-1 {
  0% {
    transform: scaleX(-1) scale(.4) translateX(-10px);
  }
  100% {
    transform: scaleX(-1) scale(.4) translateX(-1600px);
  }
}

.cloud-2 {
  top: 50px;

  animation: cloud-2 27s linear infinite;
}

@keyframes cloud-2 {
  0% {
    transform: scale(.6) translateX(10px);
  }
  100% {
    transform: scale(.6) translateX(1100px);
  }
}

.cloud-3 {
  top: 100px;

  animation: cloud-3 21s linear 2s infinite;
}

@keyframes cloud-3 {
  0% {
    transform: scale(.8) translateX(-10px);
  }
  100% {
    transform: scale(.8) translateX(850px);
  }
}

.cloud-4 {
  top: 170px;

  animation: cloud-4 15s linear infinite;
}

@keyframes cloud-4 {
  0% {
    transform: scaleX(-1) translateX(50px);
  }
  100% {
    transform: scaleX(-1) translateX(-700px);
  }
}



.sea {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;

  height: 40px;

  opacity: .8;
  background: #2a94d6;
}

.sea::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;

  height: 10px;

  content: '';

  background: #1d7fbb;
}