Animated Android walking

HTML
<div class="logo"> <div class="head"> <div></div> <div></div> <div> <div></div> <div></div> </div> </div> <div class="body"> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="footsteps"> <div></div> <div></div> </div> <div class="shadow"> <div></div> <div></div> </div>
SASS
$time: .9s body height: 100vh display: flex flex-direction: column justify-content: center align-items: center .head position: relative height: 80px width: 160px background: #a4c639 border-top-left-radius: 100px border-top-right-radius: 100px div:first-child, div:nth-child(2) position: absolute height: 7px width: 30px border-radius: 20px background: #a4c639 div:first-child left: 15px transform: rotate(50deg) div:nth-child(2) transform: rotate(-50deg) left: 116px div:nth-child(3) position: relative div position: absolute height: 15px width: 15px background: #FFF border-radius: 50% top: 35px &:first-child left: 40px &:nth-child(2) left: 107px .body position: relative width: 160px height: 130px background: #a4c639 margin-top: 5px border-bottom-left-radius: 20px border-bottom-right-radius: 20px div position: absolute width: 35px height: 110px border-radius: 30px background: #a4c639 div:first-child left: -40px transform-origin: top animation: arm-l $time infinite animation-delay: $time/2 div:nth-child(2) left: 165px transform-origin: top animation: arm-r $time infinite div:nth-child(3), div:nth-child(4) top: 75px div:nth-child(3) animation: legup-l $time infinite animation-delay: $time/2 left: 32px div:nth-child(4) animation: legup-r $time infinite left: 96px .shadow margin-top: -72px z-index: -2 height: 30px width: 160px background: #eee border-radius: 50% animation: shadow $time/2 infinite display: flex justify-content: space-between div height: 15px width: 40px background: #eee border-radius: 50% &:first-child margin: 8px -25px &:last-child margin: 8px -25px .footsteps display: flex div height: 15px width: 30px background: darken(#eee, 7%) border-radius: 50% margin: 51px 20px z-index: -1 &:first-child animation: footsteps-l $time infinite animation-delay: $time/2 &:last-child animation: footsteps-r $time infinite //------------------------------------------ // Animations //------------------------------------------ .logo animation: bobble $time/2 infinite @keyframes shadow 50% transform: scale(.96) @keyframes footsteps-l 0% opacity: 0 50% opacity: 1 100% opacity: 0 transform: translate(6px,-5px) @keyframes footsteps-r 0% opacity: 0 50% opacity: 1 100% opacity: 0 transform: translate(-6px,-5px) @keyframes bobble 0% transform: translateY(-2px) 70% transform: translateY(2px) 100% transform: translateY(-2px) @keyframes legup-l 0% transform: translate(4px, -5px) 30% transform: translate(-4px, 7px) 100% transform: translate(4px, -5px) @keyframes legup-r 0% transform: translate(-4px, -5px) 30% transform: translate(4px, 7px) 100% transform: translate(-4px, -5px) @keyframes arm-l 0% transform: rotate(7deg) 60% transform: rotate(-5deg) 100% transform: rotate(7deg) @keyframes arm-r 0% transform: rotate(-7deg) 60% transform: rotate(5deg) 100% transform: rotate(-10deg)
JAVASCRIPT
Expand for more options Login