Simple SVG Animation using CSS

by smombartz

HTML

<div class="container">
	<svg width="600" height="400" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
		<path id="cloud1" d="M-24.205 89.653c-.048-.858-.072-1.723-.072-2.593 0-25.167 20.438-45.568 45.65-45.568 7.987 0 15.495 2.047 22.026 5.645C49.733 20.12 74.025 0 103.024 0c30.752 0 56.21 22.625 60.577 52.108 1.56-.16 3.143-.243 4.745-.243 25.21 0 45.65 20.4 45.65 45.568C214 122.6 193.56 143 168.35 143H-24.278C-39.038 143-51 131.058-51 116.326c0-14.73 11.964-26.673 26.723-26.673h.072z" opacity=".4" fill="#FFF" fill-rule="evenodd"/>
	    
		<path id="cloud2" d="M128.42 62.694c.033-.6.05-1.205.05-1.813 0-17.596-14.293-31.862-31.924-31.862-5.585 0-10.835 1.43-15.402 3.947C76.712 14.07 59.724 0 39.446 0 17.942 0 .14 15.822-2.916 36.44c-1.09-.113-2.197-.17-3.317-.17-17.63 0-31.924 14.266-31.924 31.865C-38.157 85.733-23.864 100-6.233 100H128.47c10.32 0 18.687-8.35 18.687-18.653 0-10.302-8.366-18.653-18.687-18.653h-.05z" opacity=".3" fill="#FFF" fill-rule="evenodd"/>

		<g id="rocket" fill="none" fill-rule="evenodd">
			<g id="flame" fill="none" fill-rule="evenodd">
		        <path d="M37.957.898s24.385 33.987 18.18 35.765c-6.203 1.78-15.15-12.215-15.174-3.03-.025 9.183 15.664 23.193 6.74 21.14-12.786-2.946-17.86-21.3-18.36-9.46-.5 11.838 3.24 24.093-7.87 13.83C10.36 48.88 12.706 29.31 10.8 36.675c-1.905 7.365-1.388 22.79-5.82 16.2C.55 46.282.147 14.62.147 14.62L37.957.9z" fill="#FF5B0D"/>
		        <path d="M30.482 3.97s17.482 18.04 13.224 18.796c-4.257.754-11.3-4.462-10.826 1.15.476 5.614 6.177 13.274.1 8.923-6.076-4.354-10.003-13.51-9.718-6.3.285 7.21 5.17 18.003-1.024 10.335C16.045 29.21 11.93 17.89 10.988 22.29c-.94 4.4.25 13.86-3.213 9.592-3.464-4.268-1.732-19-1.732-19l24.44-8.912z" fill="#FFD03D"/>
		    </g>

	        <path d="M96.008 81.165c-1.11-6.988-2.935-13.838-5.446-20.39C78.54 29.41 51.78 6.25 20.735.347c-.876-.167-1.78.18-2.322.89C-.722 26.373-5.145 61.487 6.876 92.85c2.433 6.348 5.528 12.494 9.213 18.276-1.78 3.96-3.277 8.263-4.458...

CSS

.container{
	position: relative;
	width: 600px;
	height: 400px;
	background: #0096D5;
	background-image: linear-gradient(0deg, rgba(255,255,255,0.50) 0%, rgba(0,0,0,0.50) 100%);
}

#rocket {
	transform: translate(260px,200px);
  animation: fall 2s linear infinite;
}
#flame{
	transform: translate(55px,135px);
}
#cloud1{
	animation: fall 1s linear infinite;
}

#cloud2{
	animation: fall 2s linear infinite;
}

@keyframes fall {
	from{
		transform: translateY(-100px);
	}
	to {
		transform: translateY(1000px)
	}
}