Floating background shapes animation

What is a floating background shapes animation How do you make a floating background shapes animation? This script and codes were developed by Brandon Ward on 21 February 2022, Monday.

How do I make an floating background shapes animation?
  1. Floating background shapes animation Previews
  2. Floating background shapes animation HTML Codes
  3. Floating background shapes animation CSS Codes
  4. Floating background shapes animation JS Codes
Floating background shapes animation Previews

Floating background shapes animation HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Floating background shapes animation</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="container">
    <div class="inner-container">
        <div class="shape">
            <div class="title">
                <h1>Atomic floating shapes.</h1> 
                <a class="button" href="#">Freeze shapes</a>
          </div>
        </div>
    </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

    <script src="js/index.js"></script>

</body>
</html>

Floating background shapes animation CSS Codes

@charset "UTF-8";
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
@import url("https://fonts.googleapis.com/css?family=Shrikhand");
@import url("https://fonts.googleapis.com/css?family=Rubik:400");
body {
  margin: 0;
}

.container {
  width: 100%;
  height: 100vh;
  display: block;
  overflow: hidden;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.container .inner-container {
  width: 90%;
  margin: 0 auto;
}
.container .title {
  position: relative;
  display: block;
  top: 30vh;
}
.container .title h1 {
  font: normal 3.6rem 'Shrikhand', Helvetica, sans-serif;
  color: #fff;
  letter-spacing: 0.05em;
  text-align: center;
  text-shadow: 0 0 20px rgba(192, 202, 246, 0.9), -5px -5px 0 rgba(194, 183, 254, 0.5), 5px 5px 0 rgba(149, 169, 255, 0.6);
}
.container .button {
  font: 400 1rem 'Rubik', Helvetica, sans-serif;
  color: #667eea;
  background-color: rgba(255, 255, 255, 0.75);
  text-align: center;
  margin: 0 auto;
  padding: 1.5em 1em;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  display: block;
  position: relative;
  width: 200px;
  z-index: 100;
  text-transform: uppercase;
  transition: ease-in 0.3s;
}
.container .button:hover {
  background-color: #fff;
  box-shadow: 0px 10px 14px -3px rgba(0, 0, 0, 0.2);
  transition: all 0.3s;
}

.shape {
  margin: 0 auto;
  position: relative;
}

.random-shape:after {
  font-family: FontAwesome;
  content: "\f005";
}

@keyframes shape-1 {
  0% {
    transform: translate3d(0, 0, 0) rotate(75deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(435deg);
  }
}
.shape-container--1 {
  animation: shape-1 49s linear infinite;
}
.shape-container--1 .random-shape:after {
  margin: 9rem;
  color: #C2B7FE;
  font-size: 1.8rem;
  content: "";
}

@keyframes shape-2 {
  0% {
    transform: translate3d(0, 0, 0) rotate(191deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(551deg);
  }
}
.shape-container--2 {
  animation: shape-2 45s linear infinite;
}
.shape-container--2 .random-shape:after {
  margin: 8rem;
  color: #DB7093;
  font-size: 1.6rem;
  content: "";
}

@keyframes shape-3 {
  0% {
    transform: translate3d(0, 0, 0) rotate(268deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(628deg);
  }
}
.shape-container--3 {
  animation: shape-3 45s linear infinite;
}
.shape-container--3 .random-shape:after {
  margin: 2rem;
  color: #FFF8DC;
  font-size: 0.4rem;
  content: "";
}

@keyframes shape-4 {
  0% {
    transform: translate3d(0, 0, 0) rotate(322deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(682deg);
  }
}
.shape-container--4 {
  animation: shape-4 41s linear infinite;
}
.shape-container--4 .random-shape:after {
  margin: 2rem;
  color: #95A9FF;
  font-size: 0.4rem;
  content: "";
}

@keyframes shape-5 {
  0% {
    transform: translate3d(0, 0, 0) rotate(49deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(409deg);
  }
}
.shape-container--5 {
  animation: shape-5 44s linear infinite;
}
.shape-container--5 .random-shape:after {
  margin: 5rem;
  color: #95A9FF;
  font-size: 1rem;
  content: "";
}

@keyframes shape-6 {
  0% {
    transform: translate3d(0, 0, 0) rotate(166deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(526deg);
  }
}
.shape-container--6 {
  animation: shape-6 41s linear infinite;
}
.shape-container--6 .random-shape:after {
  margin: 1rem;
  color: #FFD700;
  font-size: 0.2rem;
  content: "";
}

@keyframes shape-7 {
  0% {
    transform: translate3d(0, 0, 0) rotate(9deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(369deg);
  }
}
.shape-container--7 {
  animation: shape-7 41s linear infinite;
}
.shape-container--7 .random-shape:after {
  margin: 9rem;
  color: #95A9FF;
  font-size: 1.8rem;
  content: "";
}

@keyframes shape-8 {
  0% {
    transform: translate3d(0, 0, 0) rotate(331deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(691deg);
  }
}
.shape-container--8 {
  animation: shape-8 46s linear infinite;
}
.shape-container--8 .random-shape:after {
  margin: 4rem;
  color: #FFF8DC;
  font-size: 0.8rem;
  content: "";
}

@keyframes shape-9 {
  0% {
    transform: translate3d(0, 0, 0) rotate(227deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(587deg);
  }
}
.shape-container--9 {
  animation: shape-9 46s linear infinite;
}
.shape-container--9 .random-shape:after {
  margin: 6rem;
  color: #95A9FF;
  font-size: 1.2rem;
  content: "";
}

@keyframes shape-10 {
  0% {
    transform: translate3d(0, 0, 0) rotate(147deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(507deg);
  }
}
.shape-container--10 {
  animation: shape-10 48s linear infinite;
}
.shape-container--10 .random-shape:after {
  margin: 3rem;
  color: #DB7093;
  font-size: 0.6rem;
  content: "";
}

@keyframes shape-11 {
  0% {
    transform: translate3d(0, 0, 0) rotate(209deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(569deg);
  }
}
.shape-container--11 {
  animation: shape-11 50s linear infinite;
}
.shape-container--11 .random-shape:after {
  margin: 10rem;
  color: #FFF8DC;
  font-size: 2rem;
  content: "";
}

@keyframes shape-12 {
  0% {
    transform: translate3d(0, 0, 0) rotate(331deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(691deg);
  }
}
.shape-container--12 {
  animation: shape-12 41s linear infinite;
}
.shape-container--12 .random-shape:after {
  margin: 2rem;
  color: #DB7093;
  font-size: 0.4rem;
  content: "";
}

@keyframes shape-13 {
  0% {
    transform: translate3d(0, 0, 0) rotate(27deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(387deg);
  }
}
.shape-container--13 {
  animation: shape-13 50s linear infinite;
}
.shape-container--13 .random-shape:after {
  margin: 3rem;
  color: #DB7093;
  font-size: 0.6rem;
  content: "";
}

@keyframes shape-14 {
  0% {
    transform: translate3d(0, 0, 0) rotate(193deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(553deg);
  }
}
.shape-container--14 {
  animation: shape-14 45s linear infinite;
}
.shape-container--14 .random-shape:after {
  margin: 6rem;
  color: #FFF8DC;
  font-size: 1.2rem;
  content: "";
}

@keyframes shape-15 {
  0% {
    transform: translate3d(0, 0, 0) rotate(317deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(677deg);
  }
}
.shape-container--15 {
  animation: shape-15 44s linear infinite;
}
.shape-container--15 .random-shape:after {
  margin: 3rem;
  color: #95A9FF;
  font-size: 0.6rem;
  content: "";
}

@keyframes shape-16 {
  0% {
    transform: translate3d(0, 0, 0) rotate(12deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(372deg);
  }
}
.shape-container--16 {
  animation: shape-16 41s linear infinite;
}
.shape-container--16 .random-shape:after {
  margin: 2rem;
  color: #FFF8DC;
  font-size: 0.4rem;
  content: "";
}

@keyframes shape-17 {
  0% {
    transform: translate3d(0, 0, 0) rotate(167deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(527deg);
  }
}
.shape-container--17 {
  animation: shape-17 43s linear infinite;
}
.shape-container--17 .random-shape:after {
  margin: 6rem;
  color: #FFF8DC;
  font-size: 1.2rem;
  content: "";
}

@keyframes shape-18 {
  0% {
    transform: translate3d(0, 0, 0) rotate(218deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(578deg);
  }
}
.shape-container--18 {
  animation: shape-18 46s linear infinite;
}
.shape-container--18 .random-shape:after {
  margin: 4rem;
  color: #95A9FF;
  font-size: 0.8rem;
  content: "";
}

@keyframes shape-19 {
  0% {
    transform: translate3d(0, 0, 0) rotate(150deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(510deg);
  }
}
.shape-container--19 {
  animation: shape-19 50s linear infinite;
}
.shape-container--19 .random-shape:after {
  margin: 4rem;
  color: #95A9FF;
  font-size: 0.8rem;
  content: "";
}

@keyframes shape-20 {
  0% {
    transform: translate3d(0, 0, 0) rotate(56deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(416deg);
  }
}
.shape-container--20 {
  animation: shape-20 41s linear infinite;
}
.shape-container--20 .random-shape:after {
  margin: 8rem;
  color: #C2B7FE;
  font-size: 1.6rem;
  content: "";
}

@keyframes shape-21 {
  0% {
    transform: translate3d(0, 0, 0) rotate(250deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(610deg);
  }
}
.shape-container--21 {
  animation: shape-21 44s linear infinite;
}
.shape-container--21 .random-shape:after {
  margin: 2rem;
  color: #C2B7FE;
  font-size: 0.4rem;
  content: "";
}

@keyframes shape-22 {
  0% {
    transform: translate3d(0, 0, 0) rotate(338deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(698deg);
  }
}
.shape-container--22 {
  animation: shape-22 49s linear infinite;
}
.shape-container--22 .random-shape:after {
  margin: 6rem;
  color: #C2B7FE;
  font-size: 1.2rem;
  content: "";
}

@keyframes shape-23 {
  0% {
    transform: translate3d(0, 0, 0) rotate(284deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(644deg);
  }
}
.shape-container--23 {
  animation: shape-23 41s linear infinite;
}
.shape-container--23 .random-shape:after {
  margin: 4rem;
  color: #FFF8DC;
  font-size: 0.8rem;
  content: "";
}

@keyframes shape-24 {
  0% {
    transform: translate3d(0, 0, 0) rotate(4deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(364deg);
  }
}
.shape-container--24 {
  animation: shape-24 49s linear infinite;
}
.shape-container--24 .random-shape:after {
  margin: 5rem;
  color: #FFD700;
  font-size: 1rem;
  content: "";
}

@keyframes shape-25 {
  0% {
    transform: translate3d(0, 0, 0) rotate(247deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(607deg);
  }
}
.shape-container--25 {
  animation: shape-25 48s linear infinite;
}
.shape-container--25 .random-shape:after {
  margin: 6rem;
  color: #FFD700;
  font-size: 1.2rem;
  content: "";
}

@keyframes shape-26 {
  0% {
    transform: translate3d(0, 0, 0) rotate(80deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(440deg);
  }
}
.shape-container--26 {
  animation: shape-26 48s linear infinite;
}
.shape-container--26 .random-shape:after {
  margin: 10rem;
  color: #FFD700;
  font-size: 2rem;
  content: "";
}

@keyframes shape-27 {
  0% {
    transform: translate3d(0, 0, 0) rotate(76deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(436deg);
  }
}
.shape-container--27 {
  animation: shape-27 43s linear infinite;
}
.shape-container--27 .random-shape:after {
  margin: 2rem;
  color: #DB7093;
  font-size: 0.4rem;
  content: "";
}

@keyframes shape-28 {
  0% {
    transform: translate3d(0, 0, 0) rotate(325deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(685deg);
  }
}
.shape-container--28 {
  animation: shape-28 43s linear infinite;
}
.shape-container--28 .random-shape:after {
  margin: 9rem;
  color: #95A9FF;
  font-size: 1.8rem;
  content: "";
}

@keyframes shape-29 {
  0% {
    transform: translate3d(0, 0, 0) rotate(231deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(591deg);
  }
}
.shape-container--29 {
  animation: shape-29 48s linear infinite;
}
.shape-container--29 .random-shape:after {
  margin: 4rem;
  color: #FFD700;
  font-size: 0.8rem;
  content: "";
}

@keyframes shape-30 {
  0% {
    transform: translate3d(0, 0, 0) rotate(182deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(542deg);
  }
}
.shape-container--30 {
  animation: shape-30 48s linear infinite;
}
.shape-container--30 .random-shape:after {
  margin: 3rem;
  color: #C2B7FE;
  font-size: 0.6rem;
  content: "";
}

@keyframes shape-31 {
  0% {
    transform: translate3d(0, 0, 0) rotate(62deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(422deg);
  }
}
.shape-container--31 {
  animation: shape-31 43s linear infinite;
}
.shape-container--31 .random-shape:after {
  margin: 7rem;
  color: #FFF8DC;
  font-size: 1.4rem;
  content: "";
}

@keyframes shape-32 {
  0% {
    transform: translate3d(0, 0, 0) rotate(178deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(538deg);
  }
}
.shape-container--32 {
  animation: shape-32 47s linear infinite;
}
.shape-container--32 .random-shape:after {
  margin: 7rem;
  color: #95A9FF;
  font-size: 1.4rem;
  content: "";
}

@keyframes shape-33 {
  0% {
    transform: translate3d(0, 0, 0) rotate(216deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(576deg);
  }
}
.shape-container--33 {
  animation: shape-33 43s linear infinite;
}
.shape-container--33 .random-shape:after {
  margin: 9rem;
  color: #C2B7FE;
  font-size: 1.8rem;
  content: "";
}

@keyframes shape-34 {
  0% {
    transform: translate3d(0, 0, 0) rotate(198deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(558deg);
  }
}
.shape-container--34 {
  animation: shape-34 46s linear infinite;
}
.shape-container--34 .random-shape:after {
  margin: 10rem;
  color: #FFD700;
  font-size: 2rem;
  content: "";
}

@keyframes shape-35 {
  0% {
    transform: translate3d(0, 0, 0) rotate(38deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(398deg);
  }
}
.shape-container--35 {
  animation: shape-35 43s linear infinite;
}
.shape-container--35 .random-shape:after {
  margin: 3rem;
  color: #FFF8DC;
  font-size: 0.6rem;
  content: "";
}

@keyframes shape-36 {
  0% {
    transform: translate3d(0, 0, 0) rotate(171deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(531deg);
  }
}
.shape-container--36 {
  animation: shape-36 48s linear infinite;
}
.shape-container--36 .random-shape:after {
  margin: 2rem;
  color: #C2B7FE;
  font-size: 0.4rem;
  content: "";
}

@keyframes shape-37 {
  0% {
    transform: translate3d(0, 0, 0) rotate(188deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(548deg);
  }
}
.shape-container--37 {
  animation: shape-37 45s linear infinite;
}
.shape-container--37 .random-shape:after {
  margin: 3rem;
  color: #95A9FF;
  font-size: 0.6rem;
  content: "";
}

@keyframes shape-38 {
  0% {
    transform: translate3d(0, 0, 0) rotate(348deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(708deg);
  }
}
.shape-container--38 {
  animation: shape-38 50s linear infinite;
}
.shape-container--38 .random-shape:after {
  margin: 2rem;
  color: #95A9FF;
  font-size: 0.4rem;
  content: "";
}

@keyframes shape-39 {
  0% {
    transform: translate3d(0, 0, 0) rotate(4deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(364deg);
  }
}
.shape-container--39 {
  animation: shape-39 42s linear infinite;
}
.shape-container--39 .random-shape:after {
  margin: 8rem;
  color: #95A9FF;
  font-size: 1.6rem;
  content: "";
}

@keyframes shape-40 {
  0% {
    transform: translate3d(0, 0, 0) rotate(111deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(471deg);
  }
}
.shape-container--40 {
  animation: shape-40 45s linear infinite;
}
.shape-container--40 .random-shape:after {
  margin: 1rem;
  color: #DB7093;
  font-size: 0.2rem;
  content: "";
}

@keyframes shape-41 {
  0% {
    transform: translate3d(0, 0, 0) rotate(26deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(386deg);
  }
}
.shape-container--41 {
  animation: shape-41 50s linear infinite;
}
.shape-container--41 .random-shape:after {
  margin: 7rem;
  color: #C2B7FE;
  font-size: 1.4rem;
  content: "";
}

@keyframes shape-42 {
  0% {
    transform: translate3d(0, 0, 0) rotate(272deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(632deg);
  }
}
.shape-container--42 {
  animation: shape-42 45s linear infinite;
}
.shape-container--42 .random-shape:after {
  margin: 10rem;
  color: #95A9FF;
  font-size: 2rem;
  content: "";
}

@keyframes shape-43 {
  0% {
    transform: translate3d(0, 0, 0) rotate(27deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(387deg);
  }
}
.shape-container--43 {
  animation: shape-43 42s linear infinite;
}
.shape-container--43 .random-shape:after {
  margin: 8rem;
  color: #C2B7FE;
  font-size: 1.6rem;
  content: "";
}

@keyframes shape-44 {
  0% {
    transform: translate3d(0, 0, 0) rotate(349deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(709deg);
  }
}
.shape-container--44 {
  animation: shape-44 42s linear infinite;
}
.shape-container--44 .random-shape:after {
  margin: 9rem;
  color: #FFD700;
  font-size: 1.8rem;
  content: "";
}

@keyframes shape-45 {
  0% {
    transform: translate3d(0, 0, 0) rotate(244deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(604deg);
  }
}
.shape-container--45 {
  animation: shape-45 46s linear infinite;
}
.shape-container--45 .random-shape:after {
  margin: 8rem;
  color: #95A9FF;
  font-size: 1.6rem;
  content: "";
}

@keyframes shape-46 {
  0% {
    transform: translate3d(0, 0, 0) rotate(272deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(632deg);
  }
}
.shape-container--46 {
  animation: shape-46 50s linear infinite;
}
.shape-container--46 .random-shape:after {
  margin: 10rem;
  color: #C2B7FE;
  font-size: 2rem;
  content: "";
}

@keyframes shape-47 {
  0% {
    transform: translate3d(0, 0, 0) rotate(261deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(621deg);
  }
}
.shape-container--47 {
  animation: shape-47 41s linear infinite;
}
.shape-container--47 .random-shape:after {
  margin: 7rem;
  color: #C2B7FE;
  font-size: 1.4rem;
  content: "";
}

@keyframes shape-48 {
  0% {
    transform: translate3d(0, 0, 0) rotate(126deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(486deg);
  }
}
.shape-container--48 {
  animation: shape-48 50s linear infinite;
}
.shape-container--48 .random-shape:after {
  margin: 9rem;
  color: #DB7093;
  font-size: 1.8rem;
  content: "";
}

@keyframes shape-49 {
  0% {
    transform: translate3d(0, 0, 0) rotate(196deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(556deg);
  }
}
.shape-container--49 {
  animation: shape-49 43s linear infinite;
}
.shape-container--49 .random-shape:after {
  margin: 5rem;
  color: #C2B7FE;
  font-size: 1rem;
  content: "";
}

@keyframes shape-50 {
  0% {
    transform: translate3d(0, 0, 0) rotate(124deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(484deg);
  }
}
.shape-container--50 {
  animation: shape-50 45s linear infinite;
}
.shape-container--50 .random-shape:after {
  margin: 3rem;
  color: #FFD700;
  font-size: 0.6rem;
  content: "";
}

.stop-shape {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

Floating background shapes animation JS Codes

$(document).ready(function() {

var html = '';
for (var i = 1; i <= 50; i ++) {
    html += '<div class="shape-container--'+i+' shape-animation"><div class="random-shape"></div></div>';
}
  
document.querySelector('.shape').innerHTML += html;

var $allShapes = $("[class*='shape-container--']");
$('.button').click(function (event) {
    $allShapes.toggleClass("stop-shape");
    var $this = $(this);
    $this.toggleClass('.button');
    if($this.hasClass('.button')){
        $this.text('Unfreeze shapes');         
    } else {
        $this.text('Freeze shapes');
    }
    event.preventDefault();
});

});
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.