LukeTR

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

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; } }