Problem with making a background animation responsive - css

Question

I built an animation for my background but is not responsive and I don't know how to make it.
I used Bootstrap 4 and CSS as my main design resources.
The CSS I sued as follows:
/* Animation GLitch */
.animation {
position: relative;
width: 100%;
height: 100vh;
background: url("https://images.unsplash.com/photo-1487174244970-cd18784bb4a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2252&q=80");
max-width: 100%;
max-height: 100%;
margin: 0 auto;
overflow: hidden;
}
.animation:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("https://images.unsplash.com/photo-1487174244970-cd18784bb4a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2252&q=80");
opacity: 0.5;
mix-blend-mode: hard-light;
display: block;
}
.animation:hover:before {
animation: animate 0.2s linear infinite;
}
#keyframes animate {
0% {
background-position: 0 0;
filter: hue-rotate(0deg);
}
10% {
background-position: 5px 0;
}
20% {
background-position: -5px 0;
}
30% {
background-position: 15px 0;
}
40% {
background-position: -5px 0;
}
50% {
background-position: -25px 0;
}
60% {
background-position: -50px 0;
}
70% {
background-position: 0 -20px;
}
80% {
background-position: -60px -20px;
}
81% {
background-position: 0 0;
}
100% {
background-position: 0 0;
filter: hue-rotate(360deg);
}
}
The animation consists of 2 same pictures that create this glitch effect but I don't know how to make it responsive.
The snippest it is working here:
https://codepen.io/Jakub41/pen/abbwxWb
I tried to use the sizing but it is modifying my effect I would like to keep the same effect on all screens

Answer 1

I do not quite understand in which way you want it to be responsive but try adding these lines after background: url(...) both times:
background-repeat: no-repeat;
background-size: cover;
Look here for more information about the background-size property.
Also the second answer of this question might interest you.