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? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, 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