A Pen by Joey Clouvel.

index.html

<div id="flask">
	<div class="background"></div>
	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 113 130" xml:space="preserve">
		<g>
			<path fill="#E6E9EA" d="M0,0v130h112.084L111.75,0H0z M94.75,128C71,128,56,128,56,128s-14.873,0-38.623,0s-13.945-19.422-6.33-35.945S40,41.25,40,41.25V3h16h11v38.25c0,0,23.901,34.283,31.517,50.805S118.5,128,94.75,128z"/>
			<path fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="M56,127.5c0,0-14.873,0-38.623,0s-13.695-19.172-6.08-35.695C18.912,75.283,40.5,41.25,40.5,41.25V2.5h-9H56h19.5h-8v38.75c0,0,23.651,34.033,31.267,50.555c7.615,16.523,19.733,35.695-4.017,35.695S56,127.5,56,127.5z"/>
		</g>
	</svg>
	<div class="bubble b0"></div>
	<div class="bubble b1"></div>
	<div class="bubble b2"></div>
	<div class="bubble b3"></div>
	<div class="bubble b4"></div>
	<div class="bubble b5"></div>
	<div class="bubble b6"></div>
	<div class="bubble b7"></div>
	<div class="bubble b8"></div>
	<div class="bubble b9"></div>
	
	<div class="swirl s0"></div>
	<div class="swirl s1"></div>
	<div class="swirl s2"></div>
	<div class="swirl s3"></div>
	<div class="swirl s4"></div>
	<div class="swirl s5"></div>
</div>

script.js

/*

No JS needed, but you will need to prefix CSS3 properties!
Think -prefix-free ;)

*/

style.css

html,body {
	background-color: #E6E9EA;
	text-align: center;
}
#flask {
	width: 197px;
	height: 230px;
	margin: 0 auto;
	margin-top: 200px;
	position: relative;
}
#flask svg {
	width: 200px;
	height: 230px;
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
}
#flask .background {
	width: 197px;
	height: 100px;
	background-color: #5BBCFC;
	position: absolute;
	z-index: 0;
	bottom: 0;
	left: 0;
	animation: liquid 3s infinite,liquid-color 80s infinite;
}
.bubble {
	width: 40px;
	height: 40px;
	background: #5BBCFC;
	border-radius: 40px;
	position: absolute;
	top: 180px;
}


@keyframes liquid {
	0% {
		height: 100px;
	}
	10% {
		height: 97px;
	}
	35% {
		height: 100px;
	}
	50% {
		height: 102px;
	}
	80% {
		height: 98px;
	}
	100% {
		height: 100px;
	}
}
@keyframes liquid-color {
	0% {
		background-color: #5BBCFC; /* blue */
	}
	20% {
		background-color: #EB77FB; /* purple */
	}
	40% {
		background-color: #FF5252; /* red */
	}
	60% {
		background-color: #FDE563; /* yellow */
	}
	80% {
		background-color: #00EF47; /* green */
	}
	100% {
		background-color: #5BBCFC; /* blue */
	}
}


@keyframes bubble {
	0% {
		top: 200px;
	}
	100% {
		top: -200px;
		opacity: 0;
	}
}
@keyframes side {
	0% {
		margin-right: 0px;
	}
	100% {
		margin-right: 35px;
	}
}



.b1,.b2,.b3 {
	right: 60px;
	transform: scale(0.4);
	opacity: 0.6;
	animation: bubble 8s linear infinite, liquid-color 80s infinite, side 2s ease-in-out infinite alternate;
}
.b2 {
	right: 65px;
	transform: scale(0.5);
	animation-delay: 2s,0s,2s;
}
.b3 {
	right: 70px;
	animation-delay: 5s,0s,5s;
	animation: bubble 10s linear infinite, liquid-color 80s infinite, side 3s ease-in-out infinite alternate;
}
.b4,.b5 {
	right: 65px;
	transform: scale(0.5);
	opacity: 0.8;
	animation: bubble 16s linear infinite, liquid-color 80s infinite, side 5s ease-in-out infinite alternate;
	animation-delay: 4s,0s,4s;
}
.b5 {
	right: 55px;
	animation-delay: 5s,0s,5s;
}
.b6,.b7,.b8 {
	right: 65px;
	transform: scale(0.6);
	opacity: 0.4;
	animation: bubble 14s linear infinite, liquid-color 80s infinite, side 3s ease-in-out infinite alternate;
	animation-delay: 9s,0s,9s;
}
.b7 {
	right: 70px;
	transform: scale(0.7);
	animation-delay: 3s,0s,3s;
}
.b8 {
	right: 65px;
	animation-delay: 7s,0s,7s;
}
.b9,.b0 {
	right: 70px;
	transform: scale(0.65);
	opacity: 0.7;
	animation: bubble 20s linear infinite, liquid-color 80s infinite, side 5s ease-in-out infinite alternate;
}
.b0 {
	right: 60px;
	animation-delay: 13s,0s,13s;
}



.swirl {
	width: 20px;
	height: 20px;
	background: #5BBCFC;
	border-radius: 20px;
	position: absolute;
	top: 140px;
	left: 80px;
}


@keyframes swirl {
	0% {
		top: 140px;
	}
	100% {
		top: 128px;
	}
}



.s0 {
	animation: liquid-color 80s infinite, swirl 1s ease-in-out infinite alternate;
}
.s1 {
	left: 100px;
	transform: scale(1.2);
	animation: liquid-color 80s infinite, swirl 2s ease-in-out infinite alternate;
	animation-delay: 0s,2s;
}
.s2 {
	left: 40px;
	transform: scale(0.8);
	animation: liquid-color 80s infinite, swirl 2s ease-in-out infinite alternate;
	animation-delay: 0s,3s;
}
.s3 {
	left: 60px;
	transform: scale(1.4);
	animation: liquid-color 80s infinite, swirl 1s ease-in-out infinite alternate;
	animation-delay: 0s,5s;
}
.s4 {
	left: 120px;
	animation: liquid-color 80s infinite, swirl 2s ease-in-out infinite alternate;
	animation-delay: 0s,3s;
}
.s5 {
	left: 135px;
	transform: scale(0.8);
	animation: liquid-color 80s infinite, swirl 1s ease-in-out infinite alternate;
	animation-delay: 0s,2s;
}

SVG-&-CSS3-lab-flask.markdown

SVG & CSS3 lab flask

SVG lab flask with CSS3 animated bubbles and swirls

A Pen by Joey Clouvel on CodePen.

License.