Setup
The setup has three layers(svgs as background on divs), all broader than the parent div, that clips off anything outside of the specified height and width.
* {
margin:0; padding: 0;
box-sizing: border-box;
color: initial;
font-size: 16px;
font-family: 'Comfortaa', cursive;
scrollbar-width: none;
}
body {
background-color: rgb(252, 241,239);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
#background {
position: relative;
background:rgb(164, 225, 240);
width: 950px;
height: 555px;
}
#clouds {
position: absolute;
top: 0;
left: 0;
background: url(https://drive.google.com/file/d/1Fln0gmJAJ1ojQNnUd6W88I5WYSorByPd/view?usp=sharing);
width: 950px;
height: 555px;
animation: foreground 60s -5s linear infinite;
background-size: cover;
}
#mountains {
position: absolute;
top: 0;
left: 0;
background: url(https://drive.google.com/file/d/1DcRrXpp90tfpTCu-28GKAAaLwMyAt-wU/view?usp=sharing);
width: 950px;
height: 555px;
animation: foreground 20s -5s linear infinite;
background-size: cover;
}
#foreground {
position: absolute;
top: 0;
left: 0;
background: url(https://drive.google.com/file/d/1pxFkNiXqu3lYwRyx7s6unQmgKVwMgAbu/view?usp=sharing);
width: 950px;
height: 555px;
animation: foreground 3s -5s linear infinite;
background-size: cover;
}
@keyframes foreground {
100% {
background-position: -2550px 0px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>parallax</title>
</head>
<body>
<div id="background">
<div id="clouds"></div>
<div id="mountains"></div>
<div id="foreground"></div>
</div>
</body>
</html>problem
On reaching the end of animation duration, it resets to its initial position and does not loop seamlessly.
This is how svgs look natively.
What am I missing?
The problem is because your mountains.svg is 2558 px wide, while the other two are 2550 px, as per your foreground keyframe specification. You could resize the svg or create another keyframe only for the mountains.