background pattern image infinite css animations

clouds

by Craig Haywood

HTML

<div id="animate-area"></div>

CSS

#animate-area {
width: 100vw;
height: 100vh;
background-image: url(http://dl.dropboxusercontent.com/s/qbkh61ubvv97p8b/bg-clouds.png) cover;
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 40s linear infinite;
-ms-animation: animatedBackground 40s linear infinite;
-moz-animation: animatedBackground 40s linear infinite;
-webkit-animation: animatedBackground 40s linear infinite;}

@-webkit-keyframes animatedBackground {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}

@-moz-keyframes animatedBackground {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}

@-o-keyframes animatedBackground {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}