Animation-flll-mode转发到工作

Question

我已经阅读了大量关于此的帖子，并且没有任何建议正在发挥作用，所以我想知道我是否遗漏了一些显而易见的东西，或者如果没有JS就无法完成。

我有以下动画，但即使是＆＃39;前进＆＃39;填充模式，幻灯片仍然会在下一个幻灯片加载之前跳回其原始位置。任何帮助表示感谢，谢谢。 （为简洁起见，删除了供应商前缀）。

因为我正在修改主题的一部分，所以没有HTML。

.slider {
overflow:hidden ;
position: relative;
padding: 0;
}

.slide1::before {
content: "";
position: absolute;
width: calc(100vw + 120px);
height: calc(100vh + 150px);
z-index: 1;
background: url(image.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
left:0;
top:-20vh;
animation:move 6s ease forwards;
}

.slide2::before {
content: "";
position: absolute;
width: calc(100vw + 120px);
height: calc(100vh + 150px);
z-index: 1;
background: url(image.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
left:-150px;
top:-20vh;
animation:movesecond 6s ease forwards;
}

.slide3::before {
content: "";
position: absolute;
width: calc(100vw + 120px);
height: calc(100vh + 150px);
z-index: 1;
background: url(image.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
left:0;
top:-20vh;
animation:movethird 6s ease forwards;
}

@-webkit-keyframes move {
from {
transform: scale(1);
}
to {
transform: scale(1.2, 1.2, 1.2) translate(-150px, -120px);
}
}

@-webkit-keyframes movesecond { 
from {
transform: scale(1);
  }
to {
transform: scale(1.2, 1.2, 1.2) translate(150px, 120px);
}
}

@-webkit-keyframes movethird { 
from {
transform: scale(1);
}
to {
transform: scale(1.2, 1.2, 1.2) translate(-150px, -120px);
}
}