CodePen Embed - Pure CSS "Sponge"

<div class="aquarium">
  <div class="aquarium__table"></div>
  <div class="aquarium__aquarium">
    <div class="aquarium__water"></div>
    <div class="aquarium__bubble"></div>
    <div class="aquarium__bubble"></div>
    <div class="aquarium__bubble"></div>
    <div class="aquarium__bubble"></div>
    <div class="aquarium__bubble"></div>
    <div class="aquarium__bubble"></div>
    <div class="aquarium__bubble"></div>
    <div class="aquarium__bubble"></div>
  </div>
  <div class="aquarium__drops">
    <div class="aquarium__drop"></div>
    <div class="aquarium__water-column"></div>
    <div class="aquarium__splash"></div>
    <div class="aquarium__splash"></div>
  </div>
  <div class="aquarium__sponge-box">
    <div class="aquarium__body">
      <div class="aquarium__body-stripe"></div>
      <div class="aquarium__body-hole"></div>
    </div>
    <div class="aquarium__face">
      <div class="aquarium__mouth"></div>
      <div class="aquarium__smile"></div>
    </div>
  </div>
</div>

.aquarium {
	position: relative;
	overflow: hidden;
	background: white;
	width: 800px; height: 500px;
	margin: auto;
}
	.aquarium *, .aquarium *::before, .aquarium *::after {
		position: absolute;
		content: '';
	}
	.aquarium__table {
		left: 230px; top: 381px;
		width: 341px; height: 6px;
		border-radius: 3px;
		background: black;
	}
		.aquarium__table:before {
			left: 105px; top: -15px;
			width: 131px; height: 19px;
			box-sizing: border-box;
			border-radius: 6px;
			border: 4px solid black;
			background: #00AAFF;
		}
	.aquarium__aquarium {
		left: 296px; top: 223px;
		width: 209px; height: 148px;
		box-sizing: border-box;
		border: 5px solid black;
		border-radius: 40px 40px 50px 50px / 74px 74px 74px 74px;
		box-shadow: inset -30px 0 0 0 rgba(54, 125, 231, 0.2);
		overflow: hidden;
		z-index: 1;
	}
	.aquarium__water {
		left: 0; top: 39px;
		width: 100%; height: 100%;
		opacity: .5;
		background: #5bb8ff;
		animation: sponge-water 2.5s linear infinite;
	}
	.aquarium__drops {
		top: 142px; left: 304px;
		width: 190px; height: 125px;
		overflow: hidden;
	}
	.aquarium__drop {
		top: 100px; left: 93px;
		width: 8px; height: 8px;
		border-radius: 100%;
		background: #80D5FF;
		animation: sponge-drop 2.5s linear infinite;
	}
	.aquarium__water-column {
		top: 122px; left: 70px;
		width: 60px; height: 130px;
		opacity: .5;
		background: #5bb8ff;
		animation: sponge-water-column 2.5s linear infinite;
	}
	.aquarium__bubble:nth-child(2) {
		left: 30px; top: 25px;
		width: 10px; height: 10px;
		background: white;
		border-radius: 100%;
		transform: scale(1);
		z-index: 2;
		animation: sponge-bubble-1 2.5s linear infinite;
	}
	.aquarium__bubble:nth-child(3) {
		left: 140px; top: 84px;
		width: 10px; height: 10px;
		background: white;
		border-radius: 100%;
		transform: scale(1);
		z-index: 2;
		animation: sponge-bubble-2 2.5s linear infinite;
	}
	.aquarium__bubble:nth-child(4) {
		left: 139px; top: 58px;
		width: 10px; height: 10px;
		background: white;
		border-radius: 100%;
		transform: scale(1);
		z-index: 2;
		animation: sponge-bubble-3 2.5s linear infinite;
	}
	.aquarium__bubble:nth-child(5) {
		left: 48px; top: 67px;
		width: 10px; height: 10px;
		background: white;
		border-radius: 100%;
		transform: scale(1);
		z-index: 2;
		animation: sponge-bubble-4 2.5s linear infinite;
	}
	.aquarium__bubble:nth-child(6) {
		left: 48px; top: 92px;
		width: 10px; height: 10px;
		background: white;
		border-radius: 100%;
		transform: scale(1);
		z-index: 2;
		animation: sponge-bubble-5 2.5s linear infinite;
	}
	.aquarium__bubble:nth-child(7) {
		left: 140px; top: 92px;
		width: 10px; height: 10px;
		background: white;
		border-radius: 100%;
		transform: scale(1);
		z-index: 2;
		animation: sponge-bubble-6 2.5s linear infinite;
	}
	.aquarium__bubble:nth-child(8) {
		left: 139px; top: 93px;
		width: 10px; height: 10px;
		background: white;
		border-radius: 100%;
		transform: scale(1);
		z-index: 2;
		animation: sponge-bubble-7 2.5s linear infinite;
	}
	.aquarium__bubble:nth-child(9) {
		left: 48px; top: 82px;
		width: 10px; height: 10px;
		background: white;
		border-radius: 100%;
		transform: scale(1);
		z-index: 2;
		animation: sponge-bubble-8 2.5s linear infinite;
	}
	.aquarium__splash:nth-child(3) {
		top: 84px; left: 30px;
		height: 8px; width: 4px;
		border-radius: 2px;
		opacity: .5;
		background: #5bb8ff;
		animation: sponge-splash-1 2.5s linear infinite;
	}
		.aquarium__splash:nth-child(3):before {
			top: 22px; left: -23px;
			height: 4px; width: 8px;
			border-radius: 2px;
			background: #5bb8ff;
		}
		.aquarium__splash:nth-child(3):after {
			top: 22px; left: 18px;
			height: 4px; width: 8px;
			border-radius: 2px;
			background: #5bb8ff;
		}
	.aquarium__splash:nth-child(4) {
		top: 84px; left: 155px;
		height: 8px; width: 4px;
		border-radius: 2px;
		opacity: .5;
		background: #5bb8ff;
		animation: sponge-splash-2 2.5s linear infinite;
	}
		.aquarium__splash:nth-child(4):before {
			top: 22px; left: -23px;
			height: 4px; width: 8px;
			border-radius: 2px;
			background: #5bb8ff;
		}
		.aquarium__splash:nth-child(4):after {
			top: 22px; left: 18px;
			height: 4px; width: 8px;
			border-radius: 2px;
			background: #5bb8ff;
		}
	.aquarium__sponge-box {
		width: 86px; height: 106px;
		left: 357px; top: 233px;
		animation: sponge-box 2.5s linear infinite;
	}
	.aquarium__body {
		width: 100%; height: 100%;
		box-sizing: border-box;
		box-shadow: inset 0 0 0 5px black, inset -10px 0 0 5px rgba(221, 165, 33, 0.47);
		border-radius: 13px;
		background: #FAEF37;
		overflow: hidden;
		animation: sponge-body 2.5s linear infinite;
	}
		.aquarium__body:before {
			top: 62px; left: 74px;
			width: 24px; height: 24px;
			box-sizing: border-box;
			background: white;
			border-radius: 100%;
			border: 5px solid black;
		}
		.aquarium__body:after {
			top: 93px; left: 14px;
			width: 24px; height: 24px;
			box-sizing: border-box;
			background: white;
			border-radius: 100%;
			border: 5px solid black;
		}
	.aquarium__body-hole {
		width: 22px; height: 22px;
		left: -3px; top: 67px;
		border-radius: 11px;
		background: rgba(0, 0, 0, 0.1);
	}
		.aquarium__body-hole:before {
			width: 15px; height: 15px;
			left: 70px; top: -46px;
			border-radius: 100%;
			background: rgba(0, 0, 0, 0.1);
		}
		.aquarium__body-hole:after {
			width: 10px; height: 10px;
			left: 57px; top: 17px;
			border-radius: 100%;
			background: rgba(0, 0, 0, 0.1);
		}
	.aquarium__body-stripe {
		width: 23px; height: 13px;
		left: 45px; top: 0;
		border-radius: 0 10px 0 0;
		border-top: 5px solid black;
		border-right: 5px solid black;
	}
		.aquarium__body-stripe:before {
			width: 5px; height: 10px;
			left: 23px; top: 9px;
			border-radius: 3px;
			background: black;
		}
	.aquarium__face {
		width: 46px; height: 56px;
		left: 20px; top: 42px;
	}
		.aquarium__face:before {
			width: 9px; height: 9px;
			border-radius: 100%;
			background: black;
			animation: sponge-eye 2.5s linear infinite;
		}
		.aquarium__face:after {
			left: 37px; top: 0px;
			width: 9px; height: 9px;
			border-radius: 100%;
			background: black;
			animation: sponge-eye 2.5s linear infinite;
		}
	.aquarium__mouth {
		left: 13px; top: 14px;
		width: 20px; height: 14px;
		box-sizing: border-box;
		border-radius: 4px 4px 14px 14px;
		border: 3px solid black;
		border-top-width: 6px;
		background: red;
		animation: sponge-mouth 2.5s linear infinite;
	}
	.aquarium__smile {
		left: 24px; top: 12px;
		animation: sponge-smile 2.5s linear infinite;
	}
		.aquarium__smile:before {
			left: -10px;
			width: 6px; height: 6px;
			border-radius: 0 0 0 6px;
			border-bottom: 3px solid black;
			border-left: 3px solid black;
			transform: rotate(-45deg);
		}
		.aquarium__smile:after {
			left: -2px;
			width: 6px; height: 6px;
			border-radius: 0 0 0 6px;
			border-bottom: 3px solid black;
			border-left: 3px solid black;
			transform: rotate(-45deg);
		}

@keyframes sponge-splash-1 {
	0% { transform: scale(0) translateY(30px); }
	9.01% { transform: scale(0) translateY(30px); }
	16.84% { transform: scale(1) translateY(0); }
	16.9% { transform: scale(0) translateY(0); }
	72.64% { transform: scale(0) translateY(30px); }
	81.44% { transform: scale(1) translateY(0); }
	81.5% { transform: scale(0) translateY(0); }
	100% { transform: scale(0) translateY(30px); }
}
@keyframes sponge-splash-2 {
	0% { transform: scale(0) translateY(30px); }
	14.4% { transform: scale(0) translateY(30px); }
	20.64% { transform: scale(1) translateY(0); }
	20.7% { transform: scale(0) translateY(0); }
	77% { transform: scale(0) translateY(30px); }
	83.24% { transform: scale(1) translateY(0); }
	83.3% { transform: scale(0) translateY(30px); }
	100% { transform: scale(0) translateY(30px); }
}
@keyframes sponge-bubble-1 {
	0% { transform: scale(0) translate(0, 0); }
	45.9% { transform: scale(0) translate(8px, 16px); }
	46% { transform: scale(0.2) translate(8px, 16px); }
	50% { transform: scale(1) translate(17px, 33px); }
	50.1% { transform: scale(0) translate(17px, 33px); }
	100% { transform: scale(0) translate(0, 0); }
}
@keyframes sponge-bubble-2 {
	0% { transform: scale(0) translate(0, 0); }
	47.9% { transform: scale(0) translate(0, 0); }
	48% { transform: scale(0.2) translate(0, 0); }
	52% { transform: scale(1) translate(25px, -58px); }
	52.1% { transform: scale(0) translate(25px, -58px); }
	100% { transform: scale(0) translate(0, 0); }
}
@keyframes sponge-bubble-3 {
	0% { transform: scale(0) translate(0, 0); }
	50.9% { transform: scale(0) translate(0, 0); }
	51% { transform: scale(0.2) translate(0, 0); }
	55% { transform: scale(1) translate(18px, -34px); }
	55.1% { transform: scale(0) translate(18px, -34px); }
	100% { transform: scale(0) translate(0, 0); }
}
@keyframes sponge-bubble-4 {
	0% { transform: scale(0) translate(0, 0); }
	52.9% { transform: scale(0) translate(0, 0); }
	53% { transform: scale(0.2) translate(0, 0); }
	57% { transform: scale(1) translate(-10px, -42px); }
	57.1% { transform: scale(0) translate(-10px, -42px); }
	100% { transform: scale(0) translate(0, 0); }
}
@keyframes sponge-bubble-5 {
	0% { transform: scale(0) translate(0, 0); }
	54.9% { transform: scale(0) translate(0, 0); }
	55% { transform: scale(0.2) translate(0, 0); }
	60% { transform: scale(1) translate(-18px, -68px); }
	60.1% { transform: scale(0) translate(-18px, -68px); }
	100% { transform: scale(0) translate(0, 0); }
}
@keyframes sponge-bubble-6 {
	0% { transform: scale(0) translate(0, 0); }
	57.9% { transform: scale(0) translate(0, 0); }
	58% { transform: scale(0.2) translate(0, 0); }
	62% { transform: scale(1) translate(-2px, -68px); }
	62.1% { transform: scale(0) translate(-2px, -68px); }
	100% { transform: scale(0) translate(0, 0); }
}
@keyframes sponge-bubble-7 {
	0% { transform: scale(0) translate(0, 0); }
	60.9% { transform: scale(0) translate(0, 0); }
	61% { transform: scale(0.2) translate(0, 0); }
	65% { transform: scale(1) translate(20px, -68px); }
	65.1% { transform: scale(0) translate(20px, -68px); }
	100% { transform: scale(0) translate(0, 0); }
}
@keyframes sponge-bubble-8 {
	0% { transform: scale(0) translate(0, 0); }
	62.9% { transform: scale(0) translate(0, 0); }
	63% { transform: scale(0.2) translate(0, 0); }
	67% { transform: scale(1) translate(-8px, -56px); }
	67.9% { transform: scale(0) translate(-8px, -56px); }
	100% { transform: scale(0) translate(0, 0); }
}
@keyframes sponge-eye {
	9.36% { transform: scale(1); }
	9.37% { transform: scale(0); }
	14.0% { transform: scale(0); }
	14.01% { transform: scale(1); }
}
@keyframes sponge-mouth {
	0% {
		border-radius: 4px 4px 14px 14px;
		transform: scale(1);
		background: red;
	}
	9.36% {
		border-radius: 4px 4px 14px 14px;
		transform: scale(0);
		background: red;
	}
	28.08% {
		border-radius: 100%;
		transform: scale(0);
		background: black;
	}
	40.56% {
		border-radius: 100%;
		transform: scaleY(1.4);
		background: black;
	}
	42.12% {
		border-radius: 100%;
		transform: scaleY(1.4);
		background: black;
	}
	48.36% {
		border-radius: 100%;
		transform: scale(0);
		background: black;
	}
	76.4% {
		border-radius: 4px 4px 14px 14px;
		transform: scale(0);
		background: red;
	}
	76.44% {
		border-radius: 4px 4px 14px 14px;
		transform: scale(0.3);
		background: red;
	}
	93.6% {
		border-radius: 4px 4px 14px 14px;
		transform: scale(1);
		background: red;
	}
	100% {
		border-radius: 4px 4px 14px 14px;
		transform: scale(1);
		background: red;
	}
}
@keyframes sponge-smile {
	0%, 48.2% { opacity: 0; }
	48.36%, 76.44% { opacity: 1; }
	76.5%, 100% { opacity: 0; }
}
@keyframes sponge-water {
	6.24% { transform: translateY(0); }
	12.48% { transform: translateY(-11px); }
	78% { transform: translateY(-11px); }
	85.8% { transform: translateY(0); }
}
@keyframes sponge-drop {
	0% { transform: scale(0) translate(0, 24px); }
	7% { transform: scale(0) translate(0, 24px); }
	15.44% { transform: scale(2) translate(0, -36px); }
	27.8% { transform: scale(0) translate(0, 24px); }
	100% { transform: scale(0) translate(0, 24px); }
}
@keyframes sponge-water-column {
	0% { transform: scaleX(0) translateY(20px); }
	7.8% { transform: scaleX(1) translateY(20px); }
	18.72% { transform: scaleX(0.1) translateY(-12px); }
	29.64% { transform: scaleX(0.3) translateY(28px); }
	81.12% { transform: scaleX(1.4) translateY(28px); }
	95.16% { transform: scaleX(0) translateY(-132px); }
	100% { transform: scaleX(0) translateY(-132px); }
}
@keyframes sponge-box {
	0% { transform: translateY(-145px); }
	9.36% { transform: translateY(20px); }
	18.72% { transform: translateY(-5px); }
	28.08% { transform: translateY(-7px); }
	43.68% { transform: translateY(0px); }
	60.84% { transform: translateY(14px); }
	78% { transform: translateY(14px); }
	85.8% { transform: translateY(-144px); }
	93.6% { transform: translateY(-197px); }
	100% { transform: translateY(-164px); }
}
@keyframes sponge-body {
	0% { transform: rotate(-134deg) scale(1) translateX(0); }
	9.36% { transform: rotate(0deg) scale(1) translateX(0); }
	48.36% { transform: rotate(0deg) scale(1) translateX(0); }
	59.28% { transform: rotate(0deg) scale(0.95) translateX(0); }
	60.84% { transform: rotate(0deg) scale(0.9) translateX(-1px); }
	62.4% { transform: rotate(0deg) scale(0.9) translateX(-3px); }
	65.52% { transform: rotate(0deg) scale(0.9) translateX(3px); }
	68.64% { transform: rotate(0deg) scale(0.9) translateX(-3px); }
	71.76% { transform: rotate(0deg) scale(0.9) translateX(5px); }
	74.88% { transform: rotate(0deg) scale(0.9) translateX(-5px); }
	78% { transform: rotate(0deg) scale(0.9) translateX(0); }
	85.8% { transform: rotate(135deg) scale(1) translateX(0); }
	93.6% { transform: rotate(180deg) scale(1) translateX(0); }
	100% { transform: rotate(210deg) scale(1) translateX(0); }
}

// Gal Shir image from 
// https://dribbble.com/shots/2560391-Sponge

This Pen is owned by Julia Miocene on CodePen.

See more by @miocene on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.