To learn how to create the CSS treadmill/ runner animation follow the steps below and watch the video tutorial.
Demo:
*to see the animation on the website click here.
Step1.
Add HTML
<div class="treadmill-animation">
<div class="treadmill">
<div class="base"></div>
<div class="legs"></div>
<div class="legs-behind"></div>
<div class="panel"></div>
</div>
<div class="runner">
<div class="runner-body"></div>
<div class="right-arm"></div>
<div class="left-arm"></div>
<div class="runner-legs">
<div class="right-leg">
<div class="right-calf">
<div class="right-shoe"></div>
</div>
</div>
<div class="left-leg">
<div class="left-calf">
<div class="left-shoe"></div>
</div>
</div>
</div>
<div class="runner-face">
<div class="hair"></div>
</div>
</div>
</div>Step2.
Add CSS
Set the colour and the position of the background and elements:
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #4b3f72;
}
.treadmill-animation {
position: relative;
top:-50px;
left:-50px;
}Style and animate the runner:
.runner {
position: absolute;
left:-50px;
top:7px;
animation: jump .25s linear infinite;
}
@keyframes jump {
0% {transform: translateY(0);}
50% {transform: translateY(-15px);}
}
.runner-body {
position: absolute;
z-index:5;
width:50px;
height: 30px;
border-radius:0 0 50px 50px;
background-color: #119da4;
top:-10px;
left:-20px;
transform: rotate(10deg);
}
.runner-body:before {
content:"";
position: absolute;
background-color: #1d4e89;
border-radius: 50px 50px 0 0;
width:50px;
height: 80px;
top:-80px;
}
.runner-body:after {
content:"";
position: absolute;
background-color: #e6b8a2;
width: 25px;
height: 40px;
border-radius:30px;
left:15px;
top:-107px;
}
.right-arm, .left-arm, .right-arm:before, .left-arm:before {
position: absolute;
width:20px;
height: 60px;
border-radius: 30px;
transform-origin: top;
}
.right-arm, .left-arm {
top:-75px;
left:0;
animation: move .5s linear infinite;
}
.right-arm {
background-color: #edc4b3;
z-index:7;
}
.left-arm {
background-color: #deab90;
z-index:-3;
animation-delay: .25s;
}
.right-arm:after, .left-arm:after {
content:"";
position: absolute;
border-radius:50%;
width: 25px;
height: 25px;
top:75px;
left:35px;
}
.right-arm:before, .right-arm:after {
background-color: #edc4b3;
}
.left-arm:before, .left-arm:after {
background-color: #deab90;
}
.right-arm:before, .left-arm:before {
content:"";
top: 45px;
left:-5px;
transform: rotate(-45deg);
}
@keyframes move {
0%, 100% {transform: rotate(65deg);}
15% {transform: rotate(55deg);}
50% {transform: rotate(-35deg);}
75% {transform: rotate(-45deg);}
}
.runner-legs {
position: absolute;
transform: rotate(20deg);
z-index:4;
}
.right-leg, .left-leg, .right-calf, .left-calf, .right-shoe, .left-shoe {
position: absolute;
transform-origin: top;
}
.right-leg, .left-leg, .right-calf, .left-calf {
width:22px;
height: 70px;
}
.right-leg, .left-leg {
border-radius:0 0 20px 20px;
animation: run .5s linear infinite;
}
.right-leg {
background-color: #edc4b3;
z-index:5;
box-shadow: inset 0 40px #119da4;
}
.left-leg {
background-color: #deab90;
box-shadow: inset 0 40px #19647e;
animation-delay: .25s;
z-index:2;
}
.right-calf, .left-calf {
top:57px;
animation: calf .5s linear infinite;
transform: rotate(75deg);
}
.right-calf {
background-color: #edc4b3;
}
.left-calf {
background-color: #deab90;
animation-delay: .25s;
}
.right-shoe, .left-shoe {
width: 50px;
height: 20px;
border-radius: 0 30px 0 0;
overflow: hidden;
top: 50px;
}
.right-shoe {
background-color: #e6dcd7;
box-shadow: inset 0 -7px #b8475d;
}
.left-shoe {
background-color: #cdb9ae;
box-shadow: inset 0 -7px #83203e;
}
.right-shoe:before, .left-shoe:before {
content:"";
position: absolute;
background-color: #333;
height:2px;
width:10px;
top:0;
left:37px;
box-shadow: -3px -5px #333, -6px -10px #333;
transform: rotate(-75deg);
}
@keyframes run {
0%, 100% {transform: rotate(-65deg);}
15% {transform: rotate(-55deg);}
50% {transform: rotate(35deg);}
75% {transform: rotate(45deg);}
}
@keyframes calf {
0%, 100% {transform: rotate(75deg);}
15% {transform: rotate(0deg);}
50% {transform: rotate(0);}
75% {transform: rotate(55deg);}
}
.runner-face {
position: absolute;
background-color: #edc4b3;
z-index:8;
width:45px;
height:50px;
top:-145px;
left:12px;
border-radius:0 0 20px 5px;
transform: rotate(5deg);
}
.runner-face:before, .runner-face:after {
content:"";
position: absolute;
border-radius:50%;
}
.runner-face:before {
width:5px;
height:10px;
top:15px;
left:25px;
background-color: #333;
box-shadow: 10px 0 #333;
}
.runner-face:after {
width:10px;
height:10px;
left:27px;
top:30px;
background-color: #c38e70;
animation: scale .25s linear infinite;
}
@keyframes scale {
0%,100% {transform: scale(1);}
50% {transform: scale(.7);}
}
.hair {
position: absolute;
z-index:5;
background-color: #774936;
width: 57px;
height:17px;
border-radius: 10px 0 20px 0;
top:-5px;
left:-2px;
}
.hair:before, .hair:after {
content:"";
position: absolute;
}
.hair:before {
background-color: #774936;
width:12px;
height:20px;
border-radius:0 0 15px 0;
top:15px;
}Style and animate the treadmill:
.treadmill {
position: relative;
}
.base {
position: absolute;
overflow: hidden;
width: 500px;
height: 50px;
border-radius: 50px;
background-color: #6c757d;
top:135px;
left:-200px;
border: 5px solid #333;
}
.base:before {
content:"";
position: absolute;
width: 500px;
height:5px;
top:70px;
background-color: #333;
box-shadow: 0 0 #333, 0 -7px #333, 0 -14px #333, 0 -21px #333, 0 -28px #333, 0 -35px #333, 0 -42px #333, 0 -49px #333,0 -56px #333, 0 -63px #333, 0 -70px #333, 0 -77px #333, 0 -84px #333, 0 -91px #333, 0 -98px #333, 0 -105px #333;
animation: mill .25s linear infinite;
}
.base:after {
content:"";
position: absolute;
border: 5px solid #333;
top:-5px;
left:-5px;
width:380px;
height:50px;
background-color: #343a40;
border-radius: 50px;
}
@keyframes mill {
0% {transform: translateY(0);}
100% {transform: translateY(35px);}
}
.legs, .legs:before, .legs-behind:before, .legs-behind:after {
position: absolute;
width:25px;
}
.legs, .legs-behind:before {
height:180px;
transform: skew(15deg);
}
.legs {
background-color: #212529;
top:25px;
z-index:7;
left:115px;
}
.legs:before, .legs-behind:after {
height:10px;
}
.legs:before {
content:"";
background-color: #212529;
left:-280px;
top:170px;
}
.legs-behind {
position: absolute;
width:500px;
height:50px;
background-color: rgba(0,0,0,.2);
border-radius:50%;
top:170px;
z-index:-4;
left:-200px;
}
.legs-behind:before {
content:"";
background-color: #adb5bd;
top:-150px;
left:400px;
}
.legs-behind:after {
content:"";
background-color: #adb5bd;
left:120px;
transform: skew(15deg);
top:20px;
}
.panel {
position: absolute;
width: 200px;
height: 25px;
background-color: #adb5bd;
z-index:8;
border-radius:30px;
left:40px;
box-shadow: inset -100px 0 #6c757d;
}
.panel:before, .panel:after {
content:"";
position: absolute;
}
.panel:before {
width: 60px;
height:25px;
background-color: #343a40;
top:-25px;
left:90px;
border-radius:0 25px 0 0;
}
.panel:after {
border-style: solid;
border-width: 30px 0 25px 30px;
border-color: transparent transparent #343a40 transparent;
height:0;
width:0;
top:-55px;
left:60px;
}Watch also the video tutorial:
Enjoy coding!
Hey, here’s something that might interest you: