Please take a quick look and help with this looping text feature

I am trying to accomplish a rotating words effect. I found a code recommendation that works, it will not work past the four entries that come with the default code.

Here is the code block.

 <h2>The four seasons
    <div class="fadeIn">
      <span>Winter.</span>
      <span>Spring.</span>
      <span>Summer.</span>
      <span>Autumn.</span>
    </div>
  </h2>

That works, however the thing breaks when i try to do:

<h2>The four seasons
    <div class="fadeIn">
      <span>Affordable.</span>
      <span>Convenient.</span>
      <span>Diverse.</span>
      <span>Sustainable.</span>
      <span>Equitable.</span>
      <span>Walkable.</span>
      <span>Safe for everyone.</span>
    </div>
  </h2>

That is what i need, that many, those words. I think the css needs a tweaking, and I do not know css. I tried adding extra "child" parts, but it did not work. I will paste the css below, thanks for your help.

/*FadeIn*/
.fadeIn{
	display: inline;
	text-indent: 8px;
}
.fadeIn span{
	animation: fadeEffect 10.5s linear infinite 0s;
	-ms-animation: fadeEffect 10.5s linear infinite 0s;
	-webkit-animation: fadeEffect 10.5s linear infinite 0s;
	color: #00abe9;
	opacity: 0;
	overflow: hidden;
	position: absolute;
}
.fadeIn span:nth-child(2){
    color: #E71010;
	animation-delay: 2.5s;
	-ms-animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;
} 
.fadeIn span:nth-child(3){
    color: #04FF33;
	animation-delay: 5s;
	-ms-animation-delay: 5s;
	-webkit-animation-delay: 5s;
}
.fadeIn span:nth-child(4){
    color: #F604FF;
	animation-delay: 7.5s;
	-ms-animation-delay: 7.5s;
	-webkit-animation-delay: 7.5s;
}

/*FadeIn Animation*/
@-moz-keyframes fadeEffect{
	0% { opacity: 0; }
	5% { opacity: 0; -moz-transform: translateY(0px); }
	10% { opacity: 1; -moz-transform: translateY(0px); }
	25% { opacity: 1; -moz-transform: translateY(0px); }
	30% { opacity: 0; -moz-transform: translateY(0px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}
@-webkit-keyframes fadeEffect{
	0% { opacity: 0; }
	5% { opacity: 0; -webkit-transform: translateY(0px); }
	10% { opacity: 1; -webkit-transform: translateY(0px); }
	25% { opacity: 1; -webkit-transform: translateY(0px); }
	30% { opacity: 0; -webkit-transform: translateY(0px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}
@-ms-keyframes fadeEffect{
	0% { opacity: 0; }
	5% { opacity: 0; -ms-transform: translateY(0px); }
	10% { opacity: 1; -ms-transform: translateY(0px); }
	25% { opacity: 1; -ms-transform: translateY(0px); }
	30% { opacity: 0; -ms-transform: translateY(0px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}

to clarify, with more than 4 entries, the words start to overlap on top of each other.

Hi,

Can you share link to page where you added the code? We can check easier