Codepad Animation (n)

HTML
<main> <div class="marker"></div> <h1>C</h1> <h1 class="r">O</h1> <h1 class="e1">D</h1> <h1 class="s1">E</h1> <h1 class="s2">P</h1> <h1 class="e2">A</h1> <h1>D</h1> </main>
CSS
html { font-size: 1px; } body { margin: 0; font-family: 'Work Sans', sans-serif; font-size: 30rem; min-height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #2980b9; } main { position: relative; display: flex; } h1 { margin: 0; color: #fff; } h1, .marker { transform: translateX(0); animation-timing-function: cubic-bezier(0.15, -0.01, 0.58, 1); animation-duration: 5s; animation-iteration-count: infinite; } .marker { position: absolute; top: 0; left: -3px; height: 8px; width: 40px; background-color: #f35e5c; animation-name: marker; } .r { margin-left: 1rem; animation-name: r; } .e1 { margin-left: 7rem; animation-name: e1; } .s1 { margin-left: 16rem; animation-name: s1; } .s2 { margin-left: 21rem; animation-name: s2; } .e2 { margin: 0 36rem 0 42rem; animation-name: e2; } @keyframes r { 0%, 20% { transform: translateX(0); } 50%, 70% { transform: translateX(35rem); } } @keyframes e1 { 0%, 20% { transform: translateX(0); } 50%, 70% { transform: translateX(75rem); } } @keyframes s1 { 0%, 20% { transform: translateX(0); } 50%, 70% { transform: translateX(81rem); } } @keyframes s2 { 0%, 20% { transform: translateX(0); } 50%, 70% { transform: translateX(71rem); } } @keyframes e2 { 0%, 20% { transform: translateX(0); } 50%, 70% { transform: translateX(34rem); } } @keyframes marker { 0%, 20% { transform: translateX(0); } 50%, 70% { transform: translateX(337rem); } }
JAVASCRIPT
Expand for more options Login