aimawaymessage Posted March 1, 2021 Share Posted March 1, 2021 Hello! I'm using this code I found on an older forum. I'm hoping to slow the animation down, but I can't get it to flow one at a time. Any suggestions for the timing? <section class="wrapper"> <h1 class="sentence">We are <div class="slidingVertical"> <span>Translators.</span> <span>Copywriters.</span> <span>Editors-at-large.</span> <span>Technologists.</span> <span><b>LOGOS.</b></span> </div> </h1> </section> <style> /*Body*/ body{ background-color: #222; font-family: 'Montserrat', sans-serif; } /*Heading1*/ h1{ color: #222; font-size: 60px; margin-top: 40px; text-align: left; } /*Sentence*/ .sentence{ color: #222; font-size: 80px; text-align: left; } /*Wrapper*/ .wrapper{ background-color: ; font-family: 'Montserrat', sans-serif; margin: 100px auto; padding: 40px 40px; position: relative; width: 70%; } /*Vertical Sliding*/ .slidingVertical{ display: inline; text-indent: 12px; } .slidingVertical span{ animation: topToBottom 12.5s linear infinite 0s; -ms-animation: topToBottom 12.5s linear infinite 0s; -webkit-animation: topToBottom 12.5s linear infinite 0s; color: #FFC300; opacity: 0; overflow: hidden; position: absolute; } .slidingVertical span:nth-child(2){ animation-delay: 2.5s; -ms-animation-delay: 2.5s; -webkit-animation-delay: 2.5s; } .slidingVertical span:nth-child(3){ animation-delay: 5s; -ms-animation-delay: 5s; -webkit-animation-delay: 5s; } .slidingVertical span:nth-child(4){ animation-delay: 7.5s; -ms-animation-delay: 7.5s; -webkit-animation-delay: 7.5s; } .slidingVertical span:nth-child(5){ animation-delay: 10s; -ms-animation-delay: 10s; -webkit-animation-delay: 10s; } /*topToBottom Animation*/ @-moz-keyframes topToBottom{ 0% { opacity: 0; } 5% { opacity: 0; -moz-transform: translateY(-50px); } 10% { opacity: 1; -moz-transform: translateY(0px); } 25% { opacity: 1; -moz-transform: translateY(0px); } 30% { opacity: 0; -moz-transform: translateY(50px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes topToBottom{ 0% { opacity: 0; } 5% { opacity: 0; -webkit-transform: translateY(-50px); } 10% { opacity: 1; -webkit-transform: translateY(0px); } 25% { opacity: 1; -webkit-transform: translateY(0px); } 30% { opacity: 0; -webkit-transform: translateY(50px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes topToBottom{ 0% { opacity: 0; } 5% { opacity: 0; -ms-transform: translateY(-50px); } 10% { opacity: 1; -ms-transform: translateY(0px); } 25% { opacity: 1; -ms-transform: translateY(0px); } 30% { opacity: 0; -ms-transform: translateY(50px); } 80% { opacity: 0; } 100% { opacity: 0; } } </style> Beyondspace 1 Link to comment
Beyondspace Posted March 1, 2021 Share Posted March 1, 2021 1 hour ago, aimawaymessage said: Hello! I'm using this code I found on an older forum. I'm hoping to slow the animation down, but I can't get it to flow one at a time. Any suggestions for the timing? <section class="wrapper"> <h1 class="sentence">We are <div class="slidingVertical"> <span>Translators.</span> <span>Copywriters.</span> <span>Editors-at-large.</span> <span>Technologists.</span> <span><b>LOGOS.</b></span> </div> </h1> </section> <style> /*Body*/ body{ background-color: #222; font-family: 'Montserrat', sans-serif; } /*Heading1*/ h1{ color: #222; font-size: 60px; margin-top: 40px; text-align: left; } /*Sentence*/ .sentence{ color: #222; font-size: 80px; text-align: left; } /*Wrapper*/ .wrapper{ background-color: ; font-family: 'Montserrat', sans-serif; margin: 100px auto; padding: 40px 40px; position: relative; width: 70%; } /*Vertical Sliding*/ .slidingVertical{ display: inline; text-indent: 12px; } .slidingVertical span{ animation: topToBottom 12.5s linear infinite 0s; -ms-animation: topToBottom 12.5s linear infinite 0s; -webkit-animation: topToBottom 12.5s linear infinite 0s; color: #FFC300; opacity: 0; overflow: hidden; position: absolute; } .slidingVertical span:nth-child(2){ animation-delay: 2.5s; -ms-animation-delay: 2.5s; -webkit-animation-delay: 2.5s; } .slidingVertical span:nth-child(3){ animation-delay: 5s; -ms-animation-delay: 5s; -webkit-animation-delay: 5s; } .slidingVertical span:nth-child(4){ animation-delay: 7.5s; -ms-animation-delay: 7.5s; -webkit-animation-delay: 7.5s; } .slidingVertical span:nth-child(5){ animation-delay: 10s; -ms-animation-delay: 10s; -webkit-animation-delay: 10s; } /*topToBottom Animation*/ @-moz-keyframes topToBottom{ 0% { opacity: 0; } 5% { opacity: 0; -moz-transform: translateY(-50px); } 10% { opacity: 1; -moz-transform: translateY(0px); } 25% { opacity: 1; -moz-transform: translateY(0px); } 30% { opacity: 0; -moz-transform: translateY(50px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes topToBottom{ 0% { opacity: 0; } 5% { opacity: 0; -webkit-transform: translateY(-50px); } 10% { opacity: 1; -webkit-transform: translateY(0px); } 25% { opacity: 1; -webkit-transform: translateY(0px); } 30% { opacity: 0; -webkit-transform: translateY(50px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes topToBottom{ 0% { opacity: 0; } 5% { opacity: 0; -ms-transform: translateY(-50px); } 10% { opacity: 1; -ms-transform: translateY(0px); } 25% { opacity: 1; -ms-transform: translateY(0px); } 30% { opacity: 0; -ms-transform: translateY(50px); } 80% { opacity: 0; } 100% { opacity: 0; } } </style> Could you show the current implemetation page? Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. 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