Scroll Micro Animation in CSS

@import url(https://fonts.googleapis.com/css?family=Cabin); $colorBg: #222a30; $colorOutline: #ffffff; $colorOutlineFade: #4e5559; $widthMouse: 52px; $heightMouse: 88px; $borderMouse: 6px; $posMouse: 8px; $posText: 2px; $sizeTrackball: 10px; $posTrackball: 20px; $shrinkTrackball: 0.4; $animDuration: 5s; @mixin bgGradient { background: $colorOutlineFade linear-gradient( transparent 0%, transparent 50%, $colorOutline 50%, $colorOutline 100% ); } body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; background-color: $colorBg; } p { margin-top: 50px; font-family: "Cabin", sans-serif; letter-spacing: 12px; text-indent: 12px; color: $colorOutline; animation: colorText $animDuration ease-out infinite, nudgeText $animDuration ease-out infinite; } .mouse { @include bgGradient; position: relative; width: $widthMouse; height: $heightMouse; background-size: 100% 100%; border-radius: 100px; background-size: 225%; animation: colorSlide $animDuration linear infinite, nudgeMouse $animDuration ease-out infinite; &:before, &:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } &:before { width: $widthMouse - $borderMouse; height: $heightMouse - $borderMouse; background-color: $colorBg; border-radius: 100px; } &:after { background-color: $colorOutline; width: $sizeTrackball; height: $sizeTrackball; border-radius: 100%; animation: trackBallSlide $animDuration linear infinite; } } @keyframes colorSlide { 0% { background-position: 0% 100%; } 20% { background-position: 0% 0%; } 21% { background-color: $colorOutlineFade; } 29.99% { background-color: $colorOutline; background-position: 0% 0%; } 30% { background-color: $colorOutlineFade; background-position: 0% 100%; } 50% { background-position: 0% 0%; } 51% { background-color: $colorOutlineFade; } 59.99% { background-color: $colorOutline; background-position: 0% 0%; } 60% { background-color: $colorOutlineFade; background-position: 0% 100%; } 80% { background-position: 0% 0%; } 81% { background-color: $colorOutlineFade; } 89.99%, 100% { background-color: $colorOutline; } } @keyframes trackBallSlide { 0% { opacity: 1; transform: scale(1) translateY(-$posTrackball); } 6% { opacity: 1; transform: scale(0.9) translateY($posTrackball/4); } 14% { opacity: 0; transform: scale($shrinkTrackball) translateY($posTrackball*2); } 15%, 19% { opacity: 0; transform: scale($shrinkTrackball) translateY(-$posTrackball); } 28%, 29.99% { opacity: 1; transform: scale(1) translateY(-$posTrackball); } 30% { opacity: 1; transform: scale(1) translateY(-$posTrackball); } 36% { opacity: 1; transform: scale(0.9) translateY($posTrackball/4); } 44% { opacity: 0; transform: scale($shrinkTrackball) translateY($posTrackball*2); } 45%, 49% { opacity: 0; transform: scale($shrinkTrackball) translateY(-$posTrackball); } 58%, 59.99% { opacity: 1; transform: scale(1) translateY(-$posTrackball); } 60% { opacity: 1; transform: scale(1) translateY(-$posTrackball); } 66% { opacity: 1; transform: scale(0.9) translateY($posTrackball/4); } 74% { opacity: 0; transform: scale($shrinkTrackball) translateY($posTrackball*2); } 75%, 79% { opacity: 0; transform: scale($shrinkTrackball) translateY(-$posTrackball); } 88%, 100% { opacity: 1; transform: scale(1) translateY(-$posTrackball); } } @keyframes nudgeMouse { 0% { transform: translateY(0); } 20% { transform: translateY($posMouse); } 30% { transform: translateY(0); } 50% { transform: translateY($posMouse); } 60% { transform: translateY(0); } 80% { transform: translateY($posMouse); } 90% { transform: translateY(0); } } @keyframes nudgeText { 0% { transform: translateY(0); } 20% { transform: translateY($posText); } 30% { transform: translateY(0); } 50% { transform: translateY($posText); } 60% { transform: translateY(0); } 80% { transform: translateY($posText); } 90% { transform: translateY(0); } } @keyframes colorText { 21% { color: $colorOutlineFade; } 30% { color: $colorOutline; } 51% { color: $colorOutlineFade; } 60% { color: $colorOutline; } 81% { color: $colorOutlineFade; } 90% { color: $colorOutline; } }