Best CSS Water Effects Examples

1.WATER WAVE CSS EFFECT:

Code

Code

HTML

 <section>
	<div class="content1st">
		<h2>Code</h2>
		<h2>Code</h2>
	</div>
</section>

CSS

.content1st {
	position: absolute;
    margin-left:230px;
}

.content1st h2 {
	color: #fff;
	font-size: 8em;
	position: absolute;
	transform: translate(-50%, -50%);
}

.content1st h2:nth-child(1) {
	color: transparent;
	-webkit-text-stroke: 2px #3db4ba;
}

.content1st h2:nth-child(2) {
	color: #38e3ec;
	animation: animate 4s ease-in-out infinite;
}

@keyframes animate {
	0%,
	100% {
		clip-path: polygon(
			0% 45%,
			16% 44%,
			33% 50%,
			54% 60%,
			70% 61%,
			84% 59%,
			100% 52%,
			100% 100%,
			0% 100%
		);
	}

	50% {
		clip-path: polygon(
			0% 60%,
			15% 65%,
			34% 66%,
			51% 62%,
			67% 50%,
			84% 45%,
			100% 46%,
			100% 100%,
			0% 100%
		);
	}
}

2.SUNRISE OVER STILL LAKE:

HTML

  <section>
	<div class="landscape">
  <div class="mountain"></div>
  <div class="mountain mountain-2"></div>
  <div class="mountain mountain-3"></div>
  <div class="sun-container sun-container-1">
  </div>
  <div class="sun-container">
    <div class="sun"></div>
  </div>
  <div class="cloud"></div>
  <div class="cloud cloud-1"></div>
  <div class="sun-container sun-container-reflection">
    <div class="sun"></div>
  </div>
  <div class="light"></div>
  <div class="light light-1"></div>
  <div class="light light-2"></div>
  <div class="light light-3"></div>
  <div class="light light-4"></div>
  <div class="light light-5"></div>
  <div class="light light-6"></div>
  <div class="light light-7"></div>
  <div class="water"></div>
  <div class="splash"></div>
  <div class="splash delay-1"></div>
  <div class="splash delay-2"></div>
  <div class="splash splash-4 delay-2"></div>
  <div class="splash splash-4 delay-3"></div>
  <div class="splash splash-4 delay-4"></div>
  <div class="splash splash-stone delay-3"></div>
  <div class="splash splash-stone splash-4"></div>
  <div class="splash splash-stone splash-5"></div>
  <div class="lotus lotus-1"></div>
  <div class="lotus lotus-2"></div>
  <div class="lotus lotus-3"></div>
  <div class="front">
    <div class="stone"></div>
    <div class="grass"></div>
    <div class="grass grass-1"></div>
    <div class="grass grass-2"></div>
    <div class="reed"></div>
    <div class="reed reed-1"></div>
  </div>
</div>
</section>

CSS

:root {
  --v1: #be91c6;
  --v2: #8a65cc;
  --v3: #5e30d9;
  --transparentv3: #5e30d900;
  --v4: #3b1895;
  --s1: #fea798;
  --s2: #ff846e;
  --cloud: #fea798;
}
.landscape:after,
.landscape:before,
.landscape *,
.landscape *:after,
.landscape *:before {
  position: absolute;
}

.front {
  z-index: 1;
  bottom: 0;
  left: 0;
  right: 0;
}

.landscape {
  height: 100vh;
  background-image: linear-gradient(var(--v1), var(--s1), var(--v1));
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.mountain {
  border-radius: 180% 80% 0% 0%/60vmin 60vmin 0% 0%;
  width: 40vmin;
  height: 30vmin;
  bottom: 50%;
  left: -10vmin;
  background: var(--s1);
  background-image: linear-gradient(var(--v1), var(--v2) 30%, var(--v3));
  box-shadow: inset -10px 0 10px -10px var(--s1);
  &:before {
    content: "";
    bottom: 0;
    width: inherit;
    height: inherit;
    background: inherit;
    border-radius: inherit;
    transform-origin: bottom center;
    transform: scaleX(1) scaleY(-0.6);
    filter: blur(3px);
  }
}

.mountain-2 {
  left: 5vmin;
  height: 15vmin;
  width: 40vmin;
  box-shadow: inset -15px 0 10px -14px var(--s1);
  border-radius: 120% 50% 0% 0%/25vmin 25vmin 0% 0%;
  background-image: linear-gradient(var(--v3), var(--v4));
}

.mountain-3 {
  border-radius: 80% 0% 0 0/100% 100% 0 0;
  right: -85vmin;
  width: 100vmin;
  left: auto;
  height: 12vmin;
  color: var(--v3);
  background-image: linear-gradient(var(--s1), var(--v4));
  box-shadow: inset 15px 0 10px -10px var(--s1);
}

.mountain-3:after {
  content: "";
  border-radius: 60% 0 0 0/100% 0 0 0;
  background: inherit;
  width: 100%;
  height: 0;
  bottom: 0;
  right: 20%;
}

.lotus {
  width: 10vmin;
  height: 5vmin;
  background: conic-gradient(
    var(--v3) 0deg 40deg,
    var(--transparentv3) 50deg 70deg,
    var(--v3) 80deg
  );
  border-radius: 50%;
}

.lotus-1 {
  bottom: 10vmin;
  right: 5vmin;
  width: 20vmin;
}

.lotus-2 {
  bottom: 20vmin;
  right: 15vmin;
  height: 3vmin;
  transform: skew(-10deg);
  opacity: 0.5;
  mix-blend-mode: multiply;
}

.lotus-3 {
  bottom: 10vmin;
  right: 35vmin;
  transform: rotate(180deg) skew(-20deg);
  opacity: 0.8;
  width: 15vmin;
}

.cloud {
  width: 80vmin;
  height: 6vmin;
  background: currentcolor;
  color: var(--cloud);
  top: 24vmin;
  left: 20vmin;
  border-radius: 50%;
  box-shadow: 30vmin 0.5vmin 0 -1vmin currentcolor,
    -25vmin 0 0 -0.6vmin currentcolor;
  opacity: 0.3;
  transform: translate3d(-150vmin, 0, 0);
  animation: clouds 120s infinite;
  animation-delay: -10s;
}
@keyframes clouds {
  50% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(150vmin, 0, 0);
  }
}
.cloud-1 {
  left: 60vmin;
  top: 15vmin;
  opacity: 0.2;
  filter: blur(1px);
  animation-delay: 0;
  animation-duration: 100s;
}

.water {
  top: 50%;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(#fea79855, var(--v2));
  overflow: hidden;
  box-shadow: inset 0 1px 4px -3px white;
}

.stone {
  bottom: -5vh;
  left: 0;
  height: 20vmin;
  width: 40vmin;
  background: var(--v4);
  box-shadow: inset 0 0 20px -5px rgba(0, 0, 0, 0.2);
  border-radius: 0% 200% 0 0/0% 200%;
}
.stone:after {
  content: "";
  background: var(--v3);
  width: 100%;
  height: 100%;
  right: -15%;
  border-radius: inherit;
  z-index: -1;
  transform: scaleX(1.3) skew(10deg);
  box-shadow: inset 0 0 20px -5px rgba(0, 0, 0, 0.4);
}

.grass {
  height: 40vmin;
  width: 10vmin;
  border-radius: 0 60% 0 0/0 100% 0 0;
  bottom: 0;
  border-right: 5px solid var(--v4);
  box-shadow: 1px 0 0 var(--s1);
  filter: drop-shadow(-0.5vmin 6vmin 0 var(--s2))
    drop-shadow(-4.5vmin 10vmin 0 var(--v3));
}

.grass-1 {
  left: 14vmin;
  bottom: -2vmin;
  transform: scaleX(-1);
  box-shadow: 2px 0 0 var(--v4);
  border-color: var(--v3);
  filter: drop-shadow(-1vmin 5vmin 0 var(--v3))
    drop-shadow(-80vmin 5vmin 0 var(--v4));
}

.grass-2 {
  right: 0;
  left: auto;
  height: 20vmin;
  bottom: -2vmin;
  transform: scaleX(-1);
}

.sun {
  background: white;
  border-radius: 50%;
  width: 20vmin;
  height: 20vmin;
  left: calc(60% - 10vmin);
  top: 100%;
  transform: translate3d(0, 0, 0);
  animation: rise 20s infinite;
  box-shadow: 0 0 10px white;
}
.reed {
  height: 40vmin;
  width: 0.5vmin;
  bottom: 0;
  left: 10vmin;
  color: var(--v4);
  background: currentColor;
  transform-origin: bottom center;
  transform: rotate(4deg);
  box-shadow: inset -1px 0 0 var(--s2), -6vmin 3vmin 0 0, 80vmin 0 0 0;
  animation: verticalise 20s infinite;
}
.reed-1 {
  color: var(--s2);
  left: 15vmin;
  height: 50vmin;
  bottom: -5vmin;
  transform: rotate(-2deg);
  animation: verticalise-1 20s infinite;
  box-shadow: inset -1px 0 0 var(--s1), 6vmin 13vmin 0 0 var(--s1),
    80vmin 10vmin 0 0 var(--v3);
}
.reed:after {
  content: "";
  width: 1.5vmin;
  height: 10vmin;
  background: currentcolor;
  border-radius: 0.75vmin;
  top: 0;
  left: -0.5vmin;
  box-shadow: inherit;
}
@keyframes verticalise {
  0%,
  10% {
    transform: rotate(4deg);
  }
  30%,
  70% {
    transform: rotate(0);
  }
}
@keyframes verticalise-1 {
  0%,
  10% {
    transform: rotate(-2deg);
  }
  45%,
  70% {
    transform: rotate(0) translateY(-6vmin);
  }
}
@keyframes rise {
  100% {
    transform: translate3d(0, -100vh, 20vmin);
  }
}
@keyframes rise-reflection {
  30% {
    opacity: 0;
    transform: translate3d(0, 5vmin, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 80vmin, 0);
  }
}
.sun-container {
  overflow: hidden;
  width: 100%;
  height: 50%;
}

.sun-container-1:after {
  content: "";
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: radial-gradient(circle at 60% 100%, var(--s2), transparent);
  animation: fade 20s infinite;
  mix-blend-mode: color-burn;
}

@keyframes fade {
  10% {
    opacity: 1;
  }
  30%,
  70% {
    opacity: 0;
  }
}
.sun-container-reflection {
  top: 50%;
  background: radial-gradient(circle at 60% 0%, var(--s2), transparent);
}
.sun-container-reflection .sun {
  background: linear-gradient(white, rgba(255, 255, 255, 0));
  box-shadow: none;
  filter: blur(5px);
  opacity: 1;
  top: 0;
  transform: translate3d(0, -20vmin, 0);
  animation-name: rise-reflection;
}

.light {
  height: 0.5vmin;
  width: 20vmin;
  background: white;
  left: 20%;
  right: 0;
  margin: auto;
  top: calc(50% + 1vmin);
  animation: light 20s infinite;
  opacity: 0;
  transform: scaleX(0.1) translate3d(0%, 0, 0);
  border-radius: 0.25vh;
  filter: blur(1px);
}

@-webkit-keyframes light {
  5% {
    opacity: 1;
    transform: scaleX(1);
  }
  10% {
    opacity: 0.6;
    transform: scaleX(1) translate3d(5%, 0, 0);
  }
  15% {
    opacity: 0.6;
    transform: scaleX(1) translate3d(-5%, 0, 0);
  }
  20% {
    opacity: 0;
    transform: scaleX(0.1) translate3d(0, 0, 0);
  }
}
@keyframes light {
  5% {
    opacity: 1;
    transform: scaleX(1);
  }
  10% {
    opacity: 0.6;
    transform: scaleX(1) translate3d(5%, 0, 0);
  }
  15% {
    opacity: 0.6;
    transform: scaleX(1) translate3d(-5%, 0, 0);
  }
  20% {
    opacity: 0;
    transform: scaleX(0.1) translate3d(0, 0, 0);
  }
}
.light-1 {
  top: calc(50% + 2vmin);
  animation-delay: 0.5s;
}

.light-2 {
  top: calc(50% + 3vmin);
  width: 18vmin;
  animation-delay: 1s;
}
.light-3 {
  top: calc(50% + 4vmin);
  width: 18vmin;
  animation-delay: 1.5s;
}
.light-4 {
  top: calc(50% + 5vmin);
  width: 16vmin;
  animation-delay: 2s;
}
.light-5 {
  top: calc(50% + 8vmin);
  width: 14vmin;
  animation-delay: 2.5s;
}
.light-6 {
  top: calc(50% + 9vmin);
  width: 10vmin;
  animation-delay: 3s;
}
.light-7 {
  top: calc(50% + 7vmin);
  width: 12vmin;
  animation-delay: 3.5s;
}

.splash {
  width: 8vmin;
  height: 3vmin;
  border: 2px solid var(--s1);
  box-shadow: 0 0 2px var(--s1);
  border-radius: 50%;
  bottom: 5vmin;
  left: 70%;
  animation: splash 9s infinite;
  transform: scale(0);
}

.splash-stone {
  bottom: 15vh;
  left: -3vmin;
  height: 10vmin;
  width: 30vmin;
}

.splash-4 {
  bottom: 5vmin;
  left: auto;
  bottom: 15vmin;
  right: -2vmin;
}

@keyframes splash {
  50%,
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
.delay-1 {
  animation-delay: 1s;
}
.delay-2 {
  animation-delay: 2s;
}
.delay-3 {
  animation-delay: 3s;
}
.delay-4 {
  animation-delay: 4s;
}
.delay-5 {
  animation-delay: 5s;
}
.delay-6 {
  animation-delay: 6s;
}

3.BUBBLE IN THE OCEAN WITH CSS:

HTML

 <section><div class="ocean">
  <div class="bubble bubble--1"></div>
  <div class="bubble bubble--2"></div>
  <div class="bubble bubble--3"></div>
  <div class="bubble bubble--4"></div>
  <div class="bubble bubble--5"></div>
  <div class="bubble bubble--6"></div>
  <div class="bubble bubble--7"></div>
  <div class="bubble bubble--8"></div>
  <div class="bubble bubble--9"></div>
  <div class="bubble bubble--10"></div>
  <div class="bubble bubble--11"></div>
  <div class="bubble bubble--12"></div>
</div>
</section>

CSS

@keyframes animateSprite {
  0% {
    background-position: -600px; /* Starting position moving left sprite */
  }
  20% {
    background-position: 0px; /* Straight on sprite */
  }
  25% {
    background-position: -200px; /* Moving up sprite */
  }
  35% {
    background-position: -400px; /* Moving right sprite */
  }
  40% {
    background-position: -400px;
  }
  50% {
    background-position: -200px;  /* Moving up sprite */
  }
  60% {
    background-position: -0px; /* Straight on sprite */
  }
  67% {
    background-position: -600px; /* Moving up sprite */
  }

  100% {
    background-position: -600px;
  }
}



.ocean {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient(0deg, #182848, #2980b9)
}

.bubble {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  position: absolute;
  background-color: white;
  bottom: -30px;
  opacity: 0.2;
  animation: bubble 15s ease-in-out infinite,
    sideWays 4s ease-in-out infinite alternate;
}

@keyframes bubble {
  0% {
    transform: translateY(0%);
    opacity: 0.06;
  }
  100% {
    transform: translateY(-120vh);
  }
}

@keyframes sideWays {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: 200px;
  }
}

.bubble--1 {
  left: 10%;
  animation-delay: 0.5s;
  animation-duration: 16s;
  opacity: 0.2;
}

.bubble--2 {
  width: 15px;
  height: 15px;
  left: 40%;
  animation-delay: 1s;
  animation-duration: 10s;
  opacity: 0.1;
}

.bubble--3 {
  width: 10px;
  height: 10px;
  left: 30%;
  animation-delay: 5s;
  animation-duration: 20s;
  opacity: 0.3;
}

.bubble--4 {
  width: 25px;
  height: 25px;
  left: 40%;
  animation-delay: 8s;
  animation-duration: 17s;
  opacity: 0.2;
}

.bubble--5 {
  width: 30px;
  height: 30px;
  left: 60%;
  animation-delay: 10s;
  animation-duration: 15s;
  opacity: 0.1;
}

.bubble--6 {
  width: 10px;
  height: 10px;
  left: 80%;
  animation-delay: 3s;
  animation-duration: 30s;
  opacity: 0.4;
}

.bubble--7 {
  width: 15px;
  height: 15px;
  left: 90%;
  animation-delay: -7s;
  animation-duration: 25s;
  opacity: 0.3;
}

.bubble--9 {
  width: 20px;
  height: 20px;
  left: 50%;
  bottom: 30px;
  animation-delay: -5s;
  animation-duration: 19s;
  opacity: 0.2;
}

.bubble--10 {
  width: 40px;
  height: 40px;
  left: 30%;
  bottom: 30px;
  animation-delay: -21s;
  animation-duration: 16s;
  opacity: 0.3;
}

.bubble--11 {
  width: 30px;
  height: 30px;
  left: 60%;
  bottom: 30px;
  animation-delay: -13.75s;
  animation-duration: 20s;
  opacity: 0.3;
}

.bubble--12 {
  width: 25px;
  height: 25px;
  left: 90%;
  bottom: 30px;
  animation-delay: -10.5s;
  animation-duration: 19s;
  opacity: 0.3;
}

4.RAIN IN CSS:

HTML

 <section><div class="container">

	<div class="rain">
		<div class="drop"></div>
		<div class="waves">
			<div></div>
			<div></div>
		</div>
		<div class="splash"></div>
		<div class="particles">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>

	<div class="rain">
		<div class="drop"></div>
		<div class="waves">
			<div></div>
			<div></div>
		</div>
		<div class="splash"></div>
		<div class="particles">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>

	<div class="rain">
		<div class="drop"></div>
		<div class="waves">
			<div></div>
			<div></div>
		</div>
		<div class="splash"></div>
		<div class="particles">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>

	<div class="rain">
		<div class="drop"></div>
		<div class="waves">
			<div></div>
			<div></div>
		</div>
		<div class="splash"></div>
		<div class="particles">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>

	<div class="rain">
		<div class="drop"></div>
		<div class="waves">
			<div></div>
			<div></div>
		</div>
		<div class="splash"></div>
		<div class="particles">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>

	<div class="rain">
		<div class="drop"></div>
		<div class="waves">
			<div></div>
			<div></div>
		</div>
		<div class="splash"></div>
		<div class="particles">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>

	<div class="rain">
		<div class="drop"></div>
		<div class="waves">
			<div></div>
			<div></div>
		</div>
		<div class="splash"></div>
		<div class="particles">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>

	<div class="rain">
		<div class="drop"></div>
		<div class="waves">
			<div></div>
			<div></div>
		</div>
		<div class="splash"></div>
		<div class="particles">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>

	<div class="rain">
		<div class="drop"></div>
		<div class="waves">
			<div></div>
			<div></div>
		</div>
		<div class="splash"></div>
		<div class="particles">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>

</div>
</section>

CSS

.container{
	width: 100%;
	 background: linear-gradient(0deg, rgba(90,210,201,1) 5%, rgba(13,156,198,1) 94%);
    height: 300px;
  min-width: 600px;
	max-width: 800px;
	max-height: 500px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
}

.row{
	display: flex;
	justify-content: center;
	align-items: center;
}

.rain{
	position: relative;
	width: 100%;
	height: 100%;
}

.rain:nth-of-type(1){
	--duration: 2.7s;
	--delay: 1s;
	transform: translate(10%, 10%) scale(0.9);
}

.rain:nth-of-type(2){
	--duration: 2.1s;
	--delay: 1.2s;
	transform: translate(-20%, 40%) scale(1.3);
}

.rain:nth-of-type(3){
	--duration: 2.3s;
	--delay: 2s;
	transform: translate(0%, 50%) scale(1.1);
}

.rain:nth-of-type(4){
	--duration: 2s;
	--delay: 4s;
	transform: translate(0%, -10%) scale(1.2);
}

.rain:nth-of-type(5){
	--duration: 2.5s;
	--delay: 0s;
	transform: translate(10%, 0%) scale(0.9);
}

.rain:nth-of-type(6){
	--duration: 2s;
	--delay: 2.7s;
	transform: translate(-20%, 0%) scale(1);
}

.rain:nth-of-type(7){
	--duration: 1.8s;
	--delay: 1.3s;
	transform: translate(20%, -40%) scale(1.2);
}

.rain:nth-of-type(8){
	--duration: 2.2s;
	--delay: 0s;
	transform: translate(20%, 0%) scale(1);
}

.rain:nth-of-type(9){
	--duration: 2s;
	--delay: 0.5s;
	transform: translate(0%, -10%) scale(1.3);
}

.drop{
	background-color: white;
	width: 2px;
	height: 100px;
	position: absolute;
	top: calc(50% - 100px); 
	left: calc(50% - 1.5px);
	animation-name: fall;
	animation-duration: var(--duration);
	animation-delay: var(--delay);
	animation-iteration-count: infinite;
	animation-timing-function: ease-in;
	animation-fill-mode: backwards;
}

@keyframes fall{
	0%{
		transform: translateY(-120vh);
	}
	45%{
		transform: translateY(0%);
		opacity: 1;
	}
	46%{
		opacity: 0;
	}
	100%{
		opacity: 0;
	}
}

.waves > div{
	position: absolute;
	top:0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	border-radius: 50%;
	border: solid white 3px;
	animation-name: spread;
	animation-duration: var(--duration);
	animation-delay: var(--delay);
	animation-iteration-count: infinite;
	animation-timing-function: ease-out;
	animation-fill-mode: backwards;
}

.waves > div:nth-child(2){
	animation-delay: calc(var(--delay) + 0.3s);
	animation-timing-function: linear;
}

@keyframes spread{
	0%{
		transform: scale(0);
		opacity: 1;
	}
	40%{
		transform: scale(0);
		opacity: 1;
	}

	100%{
		transform: scale(1);
		opacity: 0;
	}
}


.splash{
	position: absolute;
	top: 10%;
	bottom: 50%;
	left: 35%;
	right: 35%;
	border-radius: 650px;
	clip-path: ellipse(10% 17% at 52% 49%);
	background-color: white;
	transform-origin: bottom;
	animation-name: splash;
	animation-duration: var(--duration);
	animation-delay: var(--delay);
	animation-iteration-count: infinite;
	animation-timing-function: ease-out;
	animation-fill-mode: backwards;
}

@keyframes splash{
	0%{
		transform: scale(0.3, 0);
	}

	49%{
		transform: scale(0.3, 0);
	}

	50%{
		transform: scale(0.3, 0.3);
	}

	60%{
		transform: scale(0.7, 1);
	}

	90%{
		transform: scale(1, 0);
	}

	100%{
		transform: scale(1, 0);
	}
}

.particles > div{
	position: absolute;	
	border-radius: 100%;
	background-color: white;
	animation-duration: var(--duration);
	animation-delay: var(--delay);
	animation-iteration-count: infinite;
	animation-timing-function: ease;
	animation-fill-mode: backwards;
}

.particles > div:nth-child(1){
	width: 7px;
	height: 7px;
	top: 50%;
	left: 50%;
	animation-name: jumpLeft;
}

.particles > div:nth-child(2){
	width: 5px;
	height: 5px;
	top: 30%;
	left: 50%;
	animation-name: jumpLeft;
	animation-delay: calc(var(--delay) + 0.1s);
}

.particles > div:nth-child(3){
	width: 3px;
	height: 3px;
	top: 20%;
	left: 70%;
	animation-name: jumpRight;
	animation-delay: calc(var(--delay) + 0.15s);
}

.particles > div:nth-child(4){
	width: 5px;
	height: 5px;
	top: 30%;
	left: 50%;
	animation-name: jumpRight;
	animation-delay: calc(var(--delay) + 0.3s);
}

@keyframes jumpLeft{
	0%{
		transform: translate(0,0) scale(0);
	}

	45%{
		transform: translate(0,0) scale(0);
	}

	60%{
		transform: translate(-50px, -90px) scale(1);
	}

	100%{
		transform: translate(-60px, 0px) scale(0.1);
	}
}

@keyframes jumpRight{
	0%{
		transform: translate(0,0) scale(0);
	}

	45%{
		transform: translate(0,0) scale(0);
	}

	60%{
		transform: translate(30px, -80px) scale(1);
	}

	100%{
		transform: translate(50px, 0px) scale(0.1);
	}
}

5.SIMPLE CSS WAVES:

HTML

 <div class="upperwave">

<!--Content before waves-->
<div class="inner-wavesinfo flex">

</div>

<!--Waves Container-->
<div>
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
</g>
</svg>
</div>
</div>

CSS

 
    .upperwave {
  position:relative;
  text-align:center;
  background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);
  color:white;
  transform: rotate(180deg);
}

.inner-wavesinfo {
  height:65vh;
  width:100%;
  margin: 0;
  padding: 0;
  transform: rotate(180deg);
}

.flex { /*Flexbox for containers*/
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.waves {
  position:relative;
  width: 100%;
  height:15vh;
  margin-bottom:-7px; /*Fix for safari gap*/
  min-height:100px;
  max-height:150px;
}

.content {
  position:relative;
  height:20vh;
  text-align:center;
  background-color: white;
}

/* Animation */

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height:40px;
    min-height:40px;
  }
  .content {
    height:30vh;
  }

}
    

Go to Link