Смесь CSS фона и анимации

В данном примере показан пример создания фона с эффектом анимации с помощью CSS. Изменяя свойство animation можно уменьшать и увеличивать скорость анимации облаков.

CSS

html, body {
 width: 100%; height: 100%;
}

body {
 background: url(http://etc-mysitemyway.s3.amazonaws.com/webtreats/assets/posts/724/full/tileable-cloud-patterns-2.jpg), url(http://www.shedexpedition.com/wp-content/uploads/2014/05/K2-Mountain-2.jpg) no-repeat center center fixed;
 -webkit-background-size: auto,cover;
 background-size: auto,cover;
 
 -webkit-background-blend-mode: multiply, normal;
 background-blend-mode: multiply, normal;
 
 -webkit-animation: bgAnim 10s linear infinite;
 animation: bgAnim 10s linear infinite;
}

@keyframes bgAnim {
 from {
 background-position: 0px 0%, center center;
 }
 to {
 background-position: -1024px 0%, center center;
 }
}

@-webkit-keyframes bgAnim {
 from {
 background-position: 0px 0%, center center;
 }
 to {
 background-position: -1024px 0%, center center;
 }
}