<div class="sky">
  	<div class="cloud cloud01"></div>
  	<div class="cloud cloud02"></div>
</div>

	body {
		background:#678bb3; 
		padding:0;
		margin:0;
	}

.sky {
    width:100%;
		height:1000px;
		background: transparent url(https://www.w3cplus.com/sites/default/files/blogs/2015/1506/sky.jpg) top left no-repeat;
		background-size: 100% 100%;
		margin:auto;
		position:relative;
	}
	
	.cloud {
		width: 248px;
		height:131px;
    position: absolute;
		background:transparent url(https://www.w3cplus.com/sites/default/files/blogs/2015/1506/cloud.png) 0 0 no-repeat;
	  }

	.cloud01 {
		top:100px;
    left:300px;
		z-index:100;
    animation:drift 25s linear infinite;
}

	.cloud02 {
		top:240px;
		z-index: 200;
    animation: drift 35s linear 10s infinite backwards;
 }

@keyframes drift {
  from {transform: translateX(-255px);}
  to {transform: translateX(1350px);}
 }