Как сделать больше задержку между fade in и fade out

/* animate text */ 
 
body { 
  background: #000; 
} 
 
.sp-content h2 { 
  font-size: 46px !important; 
} 
 
.sp-content { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  left: 0px; 
  top: 0px; 
  z-index: 1000; 
} 
 
.sp-container h2 { 
  position: absolute; 
  top: 50%; 
  line-height: 100px; 
  height: 100px; 
  margin-top: -50px; 
  font-size: 100px; 
  width: 100%; 
  text-align: center; 
  color: transparent; 
  -webkit-animation: blurFadeInOut 3s ease-in backwards; 
  -moz-animation: blurFadeInOut 1.5s ease-in backwards; 
  -ms-animation: blurFadeInOut 1.5s ease-in backwards; 
  animation: blurFadeInOut 1.5s ease-in backwards; 
} 
 
.sp-container h2.frame-1 { 
  -webkit-animation-delay: 0s; 
  -moz-animation-delay: 0s; 
  -ms-animation-delay: 0s; 
  animation-delay: 0s; 
} 
 
.sp-container h2.frame-2 { 
  -webkit-animation-delay: 3s; 
  -moz-animation-delay: 3s; 
  -ms-animation-delay: 3s; 
  animation-delay: 3s; 
} 
 
.sp-container h2.frame-3 { 
  -webkit-animation-delay: 6s; 
  -moz-animation-delay: 6s; 
  -ms-animation-delay: 6s; 
  animation-delay: 6s; 
} 
 
.sp-container h2.frame-4 { 
  font-size: 200px; 
  -webkit-animation-delay: 9s; 
  -moz-animation-delay: 9s; 
  -ms-animation-delay: 9s; 
  animation-delay: 9s; 
} 
 
.sp-container h2.frame-5 { 
  -webkit-animation: none; 
  -moz-animation: none; 
  -ms-animation: none; 
  animation: none; 
  color: transparent; 
  text-shadow: 0px 0px 0px #fff; 
} 
 
.sp-container h2.frame-5 { 
  -webkit-animation: blurFadeIn 0.4s ease-in 12s backwards; 
  -moz-animation: blurFadeIn 0.4s ease-in 12s backwards; 
  -ms-animation: blurFadeIn 0.4s ease-in 12s backwards; 
  animation: blurFadeIn 0.4s ease-in 12s backwards; 
  color: transparent; 
  text-shadow: 0px 0px 0px #fff; 
} 
 
 
/**/ 
 
@-webkit-keyframes blurFadeInOut { 
  0% { 
    opacity: 0; 
    text-shadow: 0px 0px 0px #fff; 
    -webkit-transform: scale(1.3); 
  } 
  20%, 
  75% { 
    opacity: 1; 
    text-shadow: 0px 0px 0px #fff; 
    -webkit-transform: scale(1); 
  } 
  100% { 
    opacity: 0; 
    text-shadow: 0px 0px 0px #fff; 
    -webkit-transform: scale(0); 
  } 
} 
 
@-webkit-keyframes blurFadeIn { 
  0% { 
    opacity: 0; 
    text-shadow: 0px 0px 0px #fff; 
    -webkit-transform: scale(1.3); 
  } 
  50% { 
    opacity: 0.5; 
    text-shadow: 0px 0px 10px #fff; 
    -webkit-transform: scale(1.1); 
  } 
  100% { 
    opacity: 1; 
    text-shadow: 0px 0px 0px #fff; 
    -webkit-transform: scale(1); 
  } 
} 
 
@-webkit-keyframes fadeInBack { 
  0% { 
    opacity: 0; 
    -webkit-transform: scale(0); 
  } 
  50% { 
    opacity: 0.4; 
    -webkit-transform: scale(2); 
  } 
  100% { 
    opacity: 0.2; 
    -webkit-transform: scale(5); 
  } 
} 
 
 
/**/ 
 
@-moz-keyframes blurFadeInOut { 
  0% { 
    opacity: 0; 
    text-shadow: 0px 0px 0px #fff; 
    -moz-transform: scale(1.3); 
  } 
  20%, 
  75% { 
    opacity: 1; 
    text-shadow: 0px 0px 0px #fff; 
    -moz-transform: scale(1); 
  } 
  100% { 
    opacity: 0; 
    text-shadow: 0px 0px 0px #fff; 
    -moz-transform: scale(0); 
  } 
} 
 
@-moz-keyframes blurFadeIn { 
  0% { 
    opacity: 0; 
    text-shadow: 0px 0px 0px #fff; 
    -moz-transform: scale(1.3); 
  } 
  100% { 
    opacity: 1; 
    text-shadow: 0px 0px 0px #fff; 
    -moz-transform: scale(1); 
  } 
} 
 
@-moz-keyframes fadeInBack { 
  0% { 
    opacity: 0; 
    -moz-transform: scale(0); 
  } 
  50% { 
    opacity: 0.4; 
    -moz-transform: scale(2); 
  } 
  100% { 
    opacity: 0.2; 
    -moz-transform: scale(5); 
  } 
} 
 
 
/**/ 
 
@keyframes blurFadeInOut { 
  0% { 
    opacity: 0; 
    text-shadow: 0px 0px 0px #fff; 
    transform: scale(5); 
  } 
  20%, 
  75% { 
    opacity: 1; 
    text-shadow: 0px 0px 0px #fff; 
    transform: scale(1); 
  } 
  100% { 
    opacity: 0; 
    text-shadow: 0px 0px 0px #fff; 
    transform: scale(0); 
  } 
} 
 
@keyframes blurFadeIn { 
  0% { 
    opacity: 0; 
    text-shadow: 0px 0px 0px #fff; 
    transform: scale(1.3); 
  } 
  50% { 
    opacity: 0.5; 
    text-shadow: 0px 0px 0px #fff; 
    transform: scale(1.1); 
  } 
  100% { 
    opacity: 1; 
    text-shadow: 0px 0px 0px #fff; 
    transform: scale(1); 
  } 
} 
 
@keyframes fadeInBack { 
  0% { 
    opacity: 0; 
    transform: scale(0); 
  } 
  50% { 
    opacity: 0.4; 
    transform: scale(2); 
  } 
  100% { 
    opacity: 0.2; 
    transform: scale(5); 
  } 
}

<body> 
  <div class="sp-container"> 
    <div class="sp-content"> 
      <h2 class="frame-1">On-site vacuum processing</h2> 
      <h2 class="frame-2">Unit capacity adjustment</h2> 
      <h2 class="frame-3">Remote operation</h2> 
      <h2 class="frame-4">Customized filtration fineness</h2> 
      <h2 class="frame-5">Recyclable filter media</h2> 
    </div> 
  </div> 
</body>