Анимированный фон.

ccs only

by Denis Tverdokhlebov

HTML

<div id="Clouds">
  <div class="Cloud Foreground"></div>
  <div class="Cloud Background"></div>
  <div class="Cloud Foreground"></div>
  <div class="Cloud Background"></div>
  <div class="Cloud Foreground"></div>
  <div class="Cloud Background"></div>
  <div class="Cloud Background"></div>
  <div class="Cloud Foreground"></div>
  <div class="Cloud Background"></div>
  <div class="Cloud Background"></div>
</div>

CSS

html,
body {
  margin: 0;
  padding: 0
}

html {
  height: 100%
}

body {
  min-height: 100%;
  color: #FFF;
  background-color: #FD940A;
  background-image: radial-gradient(circle, #F9A72B 0%, #FA9026 70%, #FB6C1F 100%)
}

#Clouds {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: 30%;
  overflow: hidden;
  -webkit-animation: FadeIn 3s ease-out;
  animation: FadeIn 3s ease-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

@-webkit-keyframes FadeIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@keyframes FadeIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

.Cloud {
  position: absolute;
  width: 100%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  height: 70px;
  -webkit-animation-duration: 120s;
  animation-duration: 120s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: Float, FadeFloat;
  animation-name: Float, FadeFloat;
  z-index: 1
}

.Cloud.Foreground {
  height: 10%;
  min-height: 20px;
  z-index: 3
}

.Cloud.Background {
  height: 9.09090909%;
  min-height: 8px;
  -webkit-animation-duration: 210s;
  animation-duration: 210s
}

@-webkit-keyframes Float {
  from {
    -webkit-transform: translateX(100%) translateZ(0);
    transform: translateX(100%) translateZ(0)
  }
  to {
    -webkit-transform: translateX(-15%) translateZ(0);
    transform: translateX(-15%) translateZ(0)
  }
}

@keyframes Float {
  from {
    -webkit-transform: translateX(100%) translateZ(0);
    transform: translateX(100%) translateZ(0)
  }
  to {
    -webkit-transform: translateX(-15%) translateZ(0);
    transform: translateX(-15%) translateZ(0)
  }
}

@-webkit-keyframes FadeFloat {
  0%,
  100% {
    opacity: 0
  }
  5%,
  90%...