@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; } body{ font-family: 'Poppins', sans-serif; min-height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #082032; } .wrapper { display: flex; } .wrapper .static-txt{ color: #fff; font-size: 60px; font-weight: 400; } .dynamic-txt li{ list-style: none; color: #ff4c29; font-size: 60px; font-weight: 500; top: 0; position: relative; animation: slide 12s steps(4) infinite; } @keyframes slide { 100%{ top:-360px } } .wrapper .dynamic-txt{ margin-left: 15px; line-height: 90px; height: 90px; overflow: hidden; } .dynamic-txt li{ position: relative; } .dynamic-txt li::after { content: ''; position: absolute; width: 100%; height: 100%; background-color: #082032; border-left: 2px solid #ff4c29; left: 0; animation: typing 3s steps(10) infinite; } @keyframes typing { 40%, 60% { left: calc(100% + 30px); } 100% { left: 0; } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter