Animation In HTML and CSS
Moving Train Animation in HTML and CSS :-
Source Code :-
https://drive.google.com/drive/folders/1PbPAsnLfixyZXv8zR9wA_Oq-1RmJSvS0?usp=sharing
HTML :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Train</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="track">
<img src="track.png" alt="">
</div>
<div class="train">
<img src="train.png" alt="">
</div>
<div class="wheel-con">
<div class="wheel1 wheel">
<img src="wheel.png" alt="">
</div>
<div class="wheel2 wheel">
<img src="wheel.png" alt="">
</div>
<div class="wheel3 wheel">
<img src="wheel.png" alt="">
</div>
<div class="wheel4 wheel">
<img src="wheel.png" alt="">
</div>
<div class="wheel5 wheel">
<img src="wheel.png" alt="">
</div>
<div class="wheel6 wheel">
<img src="wheel.png" alt="">
</div>
</div>
<div class="mountain">
<img src="mountain.png" alt="">
</div>
</div>
</body>
</html>
CSS :-
*{
padding: 0;
margin: 0;
}
.container{
height: 100vh;
width: 100%;
background-image: url(background.jpg);
background-size: cover;
position: absolute;
overflow-x: hidden;
}
.track{
height: 300px;
width: 50%;
display: block;
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
right: 0;
background-repeat: repeat-x;
animation: track 10s linear infinite;
}
@keyframes track{
100%{
transform: translate(-3355px);
}
}
.train{
width: 450px;
left: 30%;
bottom: 100px;
transform: translate(-50%);
position: absolute;
z-index: 2;
}
.wheel-con{
left: 50.3%;
bottom: 93px;
transform: translateX(-50%);
position: absolute;
z-index: 2;
display: flex;
}
.wheel img{
height: 107px;
width: 106px;
animation: wheel 0.5s linear infinite;
}
@keyframes wheel{
100%{
transform: rotate(360deg);
}
}
.wheel1 img{
position: absolute;
left: -68px;
}
.wheel2 img{
position: relative;
left: 22px;
}
.wheel3 img{
position: relative;
left: 28px;
bottom: -2px;
}
.wheel4 img{
position: relative;
left: 13px;
bottom: -2px;
}
.wheel5 img{
position: relative;
left: 46px;
bottom: -2px;
}
.wheel6 img{
position: relative;
left: 60px;
bottom: -2px;
}
.mountain{
height: 650px;
width: auto;
position: absolute;
z-index: 1;
bottom: 20px;
left: 0;
right: 0;
display: block;
animation: mountain 30s linear infinite;
}
@keyframes mountain{
100%{
transform: translateX(-1992px);
}
}
Comments
Post a Comment