Guest Posted July 7, 2022 Share Posted July 7, 2022 Hi there, I have used this code to rotate two words in a quote: https://www.primitusconsultancy.co.uk/blog/how-to-create-a-rotating-text-on-squarespace Can someone please help me adjust this code for two words not four words and center the text? My text is this (wanting to rotate shake/wake): “A firecracker of energy to shake/wake up your audience.” Here is the posted code from the link: Add the text in the following format in a code block <h2>The four seasons <div class="fadeIn"> <span>Winter.</span> <span>Spring.</span> <span>Summer.</span> <span>Autumn.</span> </div> </h2> Then add the following CSS. /*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; } } Thanks in advance Link to comment
tuanphan Posted July 7, 2022 Share Posted July 7, 2022 Can you share link to page where you added quote? We can see easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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