
Demo:
To create the CSS Train Front Animation/ Loader follow the steps below and watch the video tutorial:
- Add HTML
- Add CSS
- Add CSS Animation
Step1.
Add HTML
<div class="container">
<div class="track"></div>
<div class="train"></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;
}
.container {
position: relative;
}
Add the track:
.track {
position: relative;
overflow:hidden;
width:50px;
height:100px;
border-left: 3px solid #333;
transform: skew(-10deg) rotateX(45deg);
}
.track:before {
content:"";
position: absolute;
height:3px;
width:50px;
background-color: #333;
top:90px;
box-shadow: 0 0 #333, 0 -10px #333, 0 -20px #333, 0 -30px #333, 0 -40px #333, 0 -50px #333, 0 -50px #333, 0 -60px #333,0 -70px #333, 0 -80px #333, 0 -90px #333, 0 -100px #333, 0 -110px #333, 0 -120px #333, 0 -130px #333, 0 -140px #333;
animation: track 1s linear infinite;
}
.track:after {
content:"";
position: absolute;
transform: rotate(-15deg);
width:50px;
height: 120px;
background-color: #fff;
border-left: 3px solid #333;
left:30px;
top:-10px;
}
Style the train:
.train {
position: absolute;
width: 60px;
height:60px;
background-color: #333;
border-radius:15px;
top:0;
left:-13px;
transform-origin: bottom;
animation: rotate 1s linear infinite;
}
.train:before {
content:"";
position: absolute;
background-color: #ced4da;
width:20px;
height:15px;
left:9px;
top:15px;
box-shadow: 22px 0 #ced4da;
}
.train:after {
content:"";
position: absolute;
background-color: #ced4da;
border-radius:50%;
height:10px;
width:10px;
top:45px;
left:10px;
box-shadow: 30px 0px #ced4da;
}
Step3.
Add CSS Animation
@keyframes track {
0% {transform: translateY(70px) rotateX(45deg);}
100% {transform: translateY(0px) rotateX(45deg);}
}
@keyframes rotate {
0% {transform: rotate(0);}
25% {transform: rotate(2deg);}
50% {transform: rotate(0);}
75% {transform: rotate(-2deg);}
100% {transform: rotate(0);}
}
Watch also the video tutorial:
Enjoy coding!
Hey, here’s something that might interest you:
CSS Airplane Window (Open/Close)