LukeTR Posted April 3 Share Posted April 3 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; } } Link to comment
LukeTR Posted April 3 Author Share Posted April 3 to clarify, with more than 4 entries, the words start to overlap on top of each other. Link to comment
tuanphan Posted April 7 Share Posted April 7 Hi, Can you share link to page where you added the code? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment