Css loop animation - html

Question

I have a problem with the animation, where the words should iterate 'n' number of times
The above mentioned code has 9 different words which has a fade in and out animation one after the other, but this animation is only once . What i need is the loop iterates again and again with the same animation , as the last word ends the first should be loaded.
Here is the html/css code:
h1.main,p.demos {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.sp-container {
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 0;
background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
}
.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: 90px;
margin-top: -50px;
font-size: 90px;
width: 100%;
text-align: center;
color: transparent;
-webkit-animation: blurFadeInOut 3s ease-in backwards;
-moz-animation: blurFadeInOut 3s ease-in backwards;
-ms-animation: blurFadeInOut 3s ease-in backwards;
animation: blurFadeInOut 3s ease-in backwards;
}
.sp-container h2.frame-6 {
-webkit-animation-delay:0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
}
.sp-container h2.frame-1 {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
.sp-container h2.frame-2 {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.sp-container h2.frame-3 {
-webkit-animation-delay: 9s;
-moz-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
}
.sp-container h2.frame-4 {
font-size: 200px;
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.sp-container h2.frame-7 {
font-size: 200px;
-webkit-animation-delay: 15s;
-moz-animation-delay: 15s;
-ms-animation-delay: 15s;
animation-delay: 15s;
}
.sp-container h2.frame-8 {
font-size: 200px;
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.sp-container h2.frame-9 {
font-size: 200px;
-webkit-animation-delay: 21s;
-moz-animation-delay: 21s;
-ms-animation-delay: 21s;
animation-delay: 21s;
}
.sp-container h2.frame-5 {
font-size: 200px;
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
/* .sp-container h2.frame-5 span {
-webkit-animation: blurFadeIn 3s ease-in 12s backwards;
-moz-animation: blurFadeIn 1s ease-in 12s backwards;
-ms-animation: blurFadeIn 3s ease-in 12s backwards;
animation: blurFadeIn 3s ease-in 12s backwards;
color: transparent;
text-shadow: 0px 0px 1px #fff;
} */
.sp-container h2.frame-5 span:nth-child(2) {
-webkit-animation-delay: 13s;
-moz-animation-delay: 13s;
-ms-animation-delay: 13s;
animation-delay: 13s;
}
.sp-container h2.frame-5 span:nth-child(3) {
-webkit-animation-delay: 14s;
-moz-animation-delay: 14s;
-ms-animation-delay: 14s;
animation-delay: 14s;
}
.sp-globe {
position: absolute;
width: 282px;
height: 273px;
left: 50%;
top: 50%;
margin: -137px 0 0 -141px;
background: transparent url(http://web-sonick.zz.mu/images/sl/globe.png) no-repeat top left;
-webkit-animation: fadeInBack 3.6s linear 14s backwards;
-moz-animation: fadeInBack 3.6s linear 14s backwards;
-ms-animation: fadeInBack 3.6s linear 14s backwards;
animation: fadeInBack 3.6s linear 14s backwards;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
-webkit-transform: scale(5);
-moz-transform: scale(5);
-o-transform: scale(5);
-ms-transform: scale(5);
transform: scale(5);
}
.sp-circle-link {
position: absolute;
left: 50%;
bottom: 100px;
margin-left: -50px;
text-align: center;
line-height: 100px;
width: 100px;
height: 100px;
background: #fff;
color: #3f1616;
font-size: 25px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-animation: fadeInRotate 1s linear 16s backwards;
-moz-animation: fadeInRotate 1s linear 16s backwards;
-ms-animation: fadeInRotate 1s linear 16s backwards;
animation: fadeInRotate 1s linear 16s backwards;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
}
.sp-circle-link:hover {
background: #85373b;
color: #fff;
}
/**/
#-webkit-keyframes blurFadeInOut{
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
}
20%,75%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-webkit-transform: scale(0);
}
}
#-webkit-keyframes blurFadeIn{
0%{
opacity: 0;
text-shadow: 0px 0px 40px #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 1px #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);
}
}
#-webkit-keyframes fadeInRotate{
0%{
opacity: 0;
-webkit-transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
-webkit-transform: scale(1) rotate(0deg);
}
}
/**/
#-moz-keyframes blurFadeInOut{
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-moz-transform: scale(1.3);
}
20%,75%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-moz-transform: scale(0);
}
}
#-moz-keyframes blurFadeIn{
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-moz-transform: scale(1.3);
}
100%{
opacity: 1;
text-shadow: 0px 0px 1px #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);
}
}
#-moz-keyframes fadeInRotate{
0%{
opacity: 0;
-moz-transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
-moz-transform: scale(1) rotate(0deg);
}
}
/**/
#keyframes blurFadeInOut{
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
20%,75%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 50px #fff;
transform: scale(0);
}
}
#keyframes blurFadeIn{
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
50%{
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
transform: scale(1.1);
}
100%{
opacity: 1;
text-shadow: 0px 0px 1px #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);
}
}
#keyframes fadeInRotate{
0%{
opacity: 0;
transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
<div class="container">
<div class="header">
<div class="clr"></div>
</div>
<div class="sp-container">
<div class="sp-content">
<div class="sp-globe"></div>
<h2 style="font-size:75px;font-family:bold;" class="frame-6"><span>WE </span> <span>STAND </span> <span>FOR</span></h2>
<h2 style="font-size:68px;" class="frame-1">INNOVATION</h2>
<h2 style="font-size:68px;" class="frame-2">QUALITY</h2>
<h2 style="font-size:68px;" class="frame-3">RELIABILITY</h2>
<h2 style="font-size:68px;" class="frame-4">SAFETY</h2>
<h2 style="font-size:68px;" class="frame-7">VALUES</h2>
<h2 style="font-size:68px;" class="frame-8">HARMONY</h2>
<h2 style="font-size:68px;" class="frame-9">UNITY</h2>
<h2 style="font-size:75px;font-family:bold;" class="frame-5"><span>CUSTOMER</span> </h2>
</div>
</div>
</div>

Answer 1

I don't really understand your code, but what you can do is to create an animation for each element and define the same duration for each element of the animation (the total animation time).
After that, you just have to handle "what is displayed when" using %
In my example, I will handle 4 elements, so 25% of the total time for each one (and +/-5% for fadeIn fadeOut)
.el-1, .el-2, .el-3, .el-4 {
position: absolute;
width: 100px;
height: 100px;
animation-duration: 10s; /* Total time */
animation-iteration-count: infinite;
animation-delay: 0; /* by default */
}
.el-1 {
animation-name: example-1;
background: red;
}
.el-2 {
animation-name: example-2;
background: green;
}
.el-3 {
animation-name: example-3;
background: blue;
}
.el-4 {
animation-name: example-4;
background: yellow;
}
#keyframes example-1 {
0% {opacity: 0;}
5% {opacity: 1;}
20% {opacity: 1;}
30% {opacity: 0;}
100% {opacity: 0;}
}
#keyframes example-2 {
0% {opacity: 0;}
20% {opacity: 0;}
30% {opacity: 1;}
40% {opacity: 1;}
60% {opacity: 0;}
100% {opacity: 0;}
}
#keyframes example-3 {
0% {opacity: 0;}
40% {opacity: 0;}
60% {opacity: 1;}
70% {opacity: 1;}
80% {opacity: 0;}
100% {opacity: 0;}
}
#keyframes example-4 {
0% {opacity: 0;}
70% {opacity: 0;}
80% {opacity: 1;}
95% {opacity: 1;}
100% {opacity: 0;}
}
<div class="el-1">1</div>
<div class="el-2">2</div>
<div class="el-3">3</div>
<div class="el-4">4</div>