Simple SVG Animation using CSS

by agusesetiyono

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"/>

		<path id="cloud3" d="M13.043 42.632c-.023-.408-.034-.82-.034-1.233 0-11.97 9.716-21.67 21.705-21.67 3.798 0 7.368.972 10.473 2.683C48.203 9.567 59.754 0 73.544 0c14.623 0 26.73 10.76 28.806 24.78.743-.078 1.496-.117 2.258-.117 11.99 0 21.708 9.7 21.708 21.67 0 11.966-9.72 21.667-21.708 21.667H13.01C5.99 68 .3 62.32.3 55.316c0-7.005 5.69-12.684 12.71-12.684h.033z" opacity=".2" fill="#FFF" fill-rule="evenodd"/>

		<path id="cloud4" d="M84.954 31.974c.017-.306.026-.614.026-.925 0-8.978-7.29-16.254-16.28-16.254-2.85 0-5.527.73-7.856 2.013C58.584 7.175 49.92 0 39.578 0 28.61 0 19.53 8.07 17.973 18.584c-.556-.057-1.12-.087-1.692-.087C7.29 18.497 0 25.773 0 34.75 0 43.723 7.29 51 16.28 51h68.7c5.264 0 9.53-4.26 9.53-9.513 0-5.254-4.266-9.513-9.53-9.513h-.026z" opacity=".1" 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...

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 {
	-webkit-animation: popup 1s ease infinite;
}
#flame{
	-webkit-animation: shake .2s linear infinite;
}

#cloud1{
	-webkit-animation: fall 1s linear infinite;
}

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

#cloud3{
	-webkit-animation: fall-3 2.5s linear infinite;
}
#cloud4{
	-webkit-animation: fall-4 3s linear infinite;
}



@-webkit-keyframes popup {
	0% {
		transform: translate(260px,200px);
	}
	50% {
		transform: translate(260px,240px);
	}
	100% {
		transform: translate(260px,200px);
	}
}

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

@-webkit-keyframes fall-2 {
	from{
		transform: translate(200px,-100px);
	}
	to {
		transform: translate(200px,1000px)
	}
}

@-webkit-keyframes fall-3 {
	from{
		transform: translate(400px,-100px);
	}
	to {
		transform: translate(400px,1000px)
	}
}

@-webkit-keyframes fall-4 {
	from{
		transform: translate(500px,-400px);
	}
	to {
		transform: translate(500px,1000px)
	}
}

@-webkit-keyframes shake { 
	0% 		{ -webkit-transform: translate(55px, 135px) rotate(7deg); }
	20% 	{ -webkit-transform: translate(55px, 135px) rotate(0deg); }
	40% 	{ -webkit-transform: translate(55px, 135px) rotate(-7deg); }
	60% 	{ -webkit-transform: translate(55px, 135px) rotate(0deg); }
	100% 	{ -webkit-transform: translate(55px, 135px) rotate(0deg); }
}