CSS3 Clouds animation

HTML

<img src="http://jpowell43.mydevryportfolio.com/flatDesign/images/clouds.svg" class="clouds" alt="clouds" />

CSS

.clouds {
		width: 20em;
		position: absolute;
		top: 1em;
		-webkit-animation: Clouds-h 5s linear infinite, Clouds-v 1s ease-in-out infinite;
	}

	@media only screen and (max-width: 680px) {
	  .clouds {
	  	width: 25%;
	  	top: 3em;
	  }
	}
/* Clouds CSS3 animations */

@-webkit-keyframes Clouds-h {
    from {
        right: -15%;
    }
    to { 
        right: 100%;
    }
}

@-webkit-keyframes Clouds-v {
    from {
        top: 3em;
    }
    50% {
        top: 2em;
    }
    to {
        top: 3em;
    }
}

	/* End Clouds CSS3 Animation */