My header animation - code helper

xxxxxxxxxx
 
<header>
      <!-- Section-1 -->
      <section class="mb-3">
        <div class="page-header vh-75">
          <span class="mask bg-gradient-info opacity-80"></span>
          <div class="container">
            <div class="row">
              <div class="col-lg-10 ls-1 lh-1 my-auto mx-auto">
                <h3
                  class="text-white fw-900 mb-4 text-center display-4 my-display-4"
                >
                  <span class="word1 font-weight-bold animation zoomIn"
                    >Odkrij,</span
                  >
                  <span class="word2 font-weight-bold animation zoomIn"
                    >razišči,</span
                  >
                  <span class="word3 font-weight-bold animation zoomIn"
                    >razreši!</span
                  >
                </h3>
                <!-- Divider -->
                <hr class="text-white" />
                <p
                  class="lead mb-4 fw-normal text-white opacity-90 text-center my-display-4 word4 animation zoom-in"
                >
                  <span class=""
                    >Zdaj je čas je, da prepoznate svojo pravo naravo, vzamete
                    svojo moč nazaj in zaživite svoje poslanstvo.</span
                  >
                </p>
              </div>
            </div>
          </div>
          <div class="position-absolute w-100 z-index-1 bottom-0">
            <svg
              class="waves"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              viewbox="0 24 150 40"
              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"
                ></path>
              </defs>
              <g class="simple-waves">
                <use
                  xlink:href="#gentle-wave"
                  x="48"
                  y="-1"
                  fill="rgba(255,255,255,0.40"
                ></use>
                <use
                  xlink:href="#gentle-wave"
                  x="48"
                  y="3"
                  fill="rgba(255,255,255,0.35)"
                ></use>
                <use
                  xlink:href="#gentle-wave"
                  x="48"
                  y="5"
                  fill="rgba(255,255,255,0.25)"
                ></use>
                <use
                  xlink:href="#gentle-wave"
                  x="48"
                  y="8"
                  fill="rgba(255,255,255,0.20)"
                ></use>
                <use
                  xlink:href="#gentle-wave"
                  x="48"
                  y="13"
                  fill="rgba(255,255,255,0.15)"
                ></use>
                <use
                  xlink:href="#gentle-wave"
                  x="48"
                  y="16"
                  fill="rgba(255,255,255,1"
                ></use>
              </g>
            </svg>
          </div>
        </div>
      </section>
      <!-- Section-1-end -->
        </header>

xxxxxxxxxx
 
.my-row-1 {
  background-color: #326796;
  background: -moz-radial-gradient(center, ellipse cover, #3f81bc 0%, #326796 100%);
  background: -webkit-radial-gradient(center, ellipse cover, #3f81bc 0%, #326796 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #3f81bc), color-stop(100%, #326796));
  background: -o-radial-gradient(center, ellipse cover, #3f81bc 0%, #326796 100%);
  background: -ms-radial-gradient(center, ellipse cover, #3f81bc 0%, #326796 100%);
  background: radial-gradient(ellipse at center, #3f81bc 0%, #326796 100%);
  border-bottom: 1px solid #76ABD9; 
}
​
.my-text-color {
   color: #C2D2E0;
}
@media (max-width: 575px) { 
    .logo-container {
      margin-left: 32%;
​
  }
}
@media (max-width: 991px) { 
    .click-to-action {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}
@media (max-width: 575px) { 
    .my-fa-phone-1 {
      height: 100px;
  }
}
.logo {
  width: 155px;
  height: 140px;
}
​
.logo-container {
  padding-left: 2%;
}
​
​
.click-to-action {
  padding-right: 2%;
}
​
.pulse i {
    color: #88a8c3;
}
​
.pulse {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative
}
​
.pulse::before {
    content: "";
    position: absolute;
    border: 1px solid #88a8c3;
    width: calc(100% + 40px);
    height: calc(100% + 40px);
    border-radius: 50%;
    animation: pulse 1s linear infinite
}
​
.pulse::after {
    content: "";
    position: absolute;
    border: 1px solid #88a8c3;
    width: calc(100% + 40px);
    height: calc(100% + 40px);
    border-radius: 50%;
    animation: pulse 1s linear infinite;
    animation-delay: 0.3s
}
​
@keyframes pulse {
    0% {
        transform: scale(0.5);
        opacity: 0
    }
​
    50% {
        transform: scale(1);
        opacity: 1
    }
​
    100% {
        transform: scale(1.3);
        opacity: 0
    }
}
.navbar {
  background-color: #3977ac;
  background: -moz-radial-gradient(center, ellipse cover, #3f81bc 0%, #3977ac 100%);
  background: -webkit-radial-gradient(center, ellipse cover, #3f81bc 0%, #3977ac 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #3f81bc), color-stop(100%, #3977ac));
  background: -o-radial-gradient(center, ellipse cover, #3f81bc 0%, #3977ac 100%);
  background: -ms-radial-gradient(center, ellipse cover, #3f81bc 0%, #3977ac 100%);
  background: radial-gradient(ellipse at center, #3f81bc 0%, #3977ac 100%);
}
​
.navbar-text {
  color: #c2d2e0; }
  .navbar-text a {
    color: #ffffff; }
    .navbar-text a:hover, .navbar-text a:focus {
      color: #c2d2e0; 
}
​
.navbar-nav .nav-link {
  color: #c2d2e0;
  border-radius: 0.25rem;
  margin: 0 0.25em; }
  .navbar-nav .nav-link:not(.disabled):hover, .navbar-nav .nav-link:not(.disabled):focus {
    color: #ffffff; }
.navbar-nav .dropdown-menu {
  border-color: #76ABD9;
  background-color: #3977ac; }
.navbar-nav .dropdown-item {
  color: #c2d2e0; }
  .navbar-nav .dropdown-item:hover, .navbar-nav .dropdown-item:focus, .navbar-nav .dropdown-item.active {
    color: #ffffff;
    background-color: #3977ac; }
.navbar-nav .dropdown-divider {
  border-top-color: #c2d2e0; 
}
​
.nav-item.active .nav-link {
  color: #ffffff; }
  .nav-item.active .nav-link:hover, .nav-item.active .nav-link:focus {
    color: #ffffff; }
.nav-item.show .nav-link {
  color: #ffffff; }
  .nav-item.show .nav-link:hover, .nav-item.show .nav-link:focus {
    color: #ffffff; 
}
​
.navbar-toggle {
  border-color: #428bca; }
  .navbar-toggle:hover, .navbar-toggle:focus {
    background-color: #428bca; }
  .navbar-toggle .navbar-toggler-icon {
    color: #c2d2e0; 
}
​
.navbar-collapse, .navbar-form {
  border-color: #c2d2e0; 
}
​
.navbar-link {
  color: #c2d2e0; 
}
​
.header-bord.t {
  border-bottom: thin solid #76ABD9; 
}
​
.navbar .navbar-link:hover {
  color: #ffffff;
  background-color: #3977ac; 
}
​
.navbar-dark .navbar-toggler {
  border: 0px black solid; 
}
​
.my-divider {
  background-color: #c2d2e0;
}
​
body {
  font-family: Roboto, sans-serif;
  font-weight: 300;
}
​
.bg-gradient-info {
    background: linear-gradient(310deg, rgba(106, 17, 203, 0.8), rgba(37, 117, 252, 0.8)); 
}
​
.min-vh-75 {
    min-height: 75vh;
}
​
.z-index-1 {
    z-index: 1;
}
​
.page-header {
    padding: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: 50%
}
​
.page-header {
     background-image: url('../img/content/jpg/Regresija-hipnoza-4.jpg');
     background-size: cover;
     background-position: 50% 50%;
     background-color: rgba(0, 0, 0, 0);
}
.page-header .container {
    z-index: 1
}
​
.fw-900 {
    font-weight: 900;
}
​
.waves {
    position: relative;
    width: 100%;
    height: 15vh;
    margin-bottom: -7px;
    /*Fixforsafarigap*/
    min-height: 100px;
    max-height: 150px;
}
​
.simple-waves>use {
    animation: wavy 55s cubic-bezier(.55, .5, .45, .5) infinite;
}
​
.simple-waves>use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
}
​
.simple-waves>use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}
​
.simple-waves>use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}
​
.simple-waves>use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 16s;
}
​
.simple-waves>use:nth-child(5) {
    animation-delay: -4s;
    animation-duration: 20s;
}
​
@keyframes wavy {
    0% {
        transform: translate3d(-90px, 0, 0);
    }
​
    100% {
        transform: translate3d(85px, 0, 0);
    }
}
​
@media(max-width:768px) {
    .waves {
        height: 40px;
        min-height: 40px;
    }
}
​
.dropdown-menu li {
    position: relative;
}
​
.dropdown-menu .dropdown-submenu {
    position: absolute !important;
    left: 100%;
    top: 0;
    border:1px solid;
    border-color:#c2d2e0;
}
​
.dropdown-menu {
    position: absolute !important;
    left: 100%;
    margin-left: 0 !important;
    top: 0;
    border:1px solid;
    border-color:#c2d2e0;
}
.dropdown-menu .dropdown-toggle {
    padding: .25rem 1.1rem !important;
}
​
@media screen and (max-width :767px) {
    .dropdown-menu .dropdown-submenu {
        position: static !important;
    }
}
​
.dropdown-toggle[aria-expanded="true"]:after {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
​
/*for the animation*/
.dropdown-toggle:after {
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  transition: 0.5s;
}
​
.dropdown-toggle.active-dropdown::after {
  transform: rotate(-90deg);
}
​
.dropdown-toggle[aria-expanded="true"]:after {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
​
.dropdown-toggle:after {
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  transition: 0.5s;
}
​
.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: 0.1rem;
  margin-right: 0.1rem;
}
@media (max-width: 991px) {
  .col-b1 {
    border-top: thin solid #76abd9;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}
​
#icon {
  width: 60px;
  height: 50px;
  cursor: pointer;
  transform: translate3d(0, 0, 0);
}
.hamburger-icon path {
  fill: none;
  transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
  stroke-width: 30px;
  stroke-linecap: round;
  stroke: #c2d2e0;
  stroke-dashoffset: 0px;
}
.hamburger-icon path#top,
.hamburger-icon path#bottom {
  stroke-dasharray: 240px 950px;
}
.hamburger-icon path#middle {
  stroke-dasharray: 240px 240px;
}
.cross path#top,
.cross path#bottom {
  stroke-dashoffset: -650px;
  stroke-dashoffset: -650px;
}
.cross path#middle {
  stroke-dashoffset: -115px;
  stroke-dasharray: 1px 220px;
}
​
@media (min-width: 575px) and (max-width: 991px) { 
   .navbar {
      padding-top: 0px;
  }
}
@media (max-width: 575px) { 
    .navbar {
      padding-top: 0px;
  }
}
​
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }
​
  50% {
    opacity: 1;
  }
}
​
.zoomIn {
  animation-name: zoomIn;
}
​
.word1 {
  -webkit-animation-name: zoomIn;
  -moz-animation-name: zoomIn;
  -o-animation-name: zoomIn;
  -ms-animation-name: zoomIn;
  animation-name: zoomIn;
  animation: zoomIn;
  animation-duration: 1s;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
​
}
​
.word2 {
  -webkit-animation-name: zoomIn;
  -moz-animation-name: zoomIn;
  -o-animation-name: zoomIn;
  -ms-animation-name: zoomIn;
  animation-name: zoomIn;
  animation: zoomIn;
  animation-duration: 1s;
  animation-delay: 1.5s;
  animation-iteration-count: 1; 
​
}
​
.word3 {
  -webkit-animation-name: zoomIn;
  -moz-animation-name: zoomIn;
  -o-animation-name: zoomIn;
  -ms-animation-name: zoomIn;
  animation-name: zoomIn;
  animation: zoomIn;
  animation-duration: 1s;
  animation-delay: 2.5s;
  animation-iteration-count: 1; 
​
}
​
.word4 {
  -webkit-animation-name: zoomIn;
  -moz-animation-name: zoomIn;
  -o-animation-name: zoomIn;
  -ms-animation-name: zoomIn;
  animation-name: zoomIn;
  animation: zoomIn;
  animation-duration: 1s;
  animation-delay: 3.5s;
  animation-iteration-count: 1; 
​
}

​

Console errors: 0