我有一个非常奇怪的问题，我不知道如何解决。
以下是代码： https://codepen.io/krystian-motyl/pen/ZEEVYQX

问题出在这里： SVG animation

    .lewy
{
    fill:#F3E5F5;
    position: absolute;
}
.prawy
{
    fill:#F3E5F5;
    position: absolute;
}
.lewy_srodek
{
    fill:#F3E5F5;
    position: absolute;
}
.lewy {
animation-name: przesun;
animation-duration: 3s;
animation-iteration-count: infinite;
transform-origin: 50% 50%;
animation-direction: alternate-reverse;
animation-iteration-count: none;
animation-fill-mode: forwards;
}
@keyframes przesun {
0%   { transform: translate(-45px,0); }
20% { transform: translate(-45px,0); }
90% { transform: translate(0,0); }
100% { transform: translate(0,0); }
}
.prawy {
animation-name: przesun_srodek;
animation-duration: 3s;
animation-iteration-count: infinite;
transform-origin: 50% 50%;
animation-direction: alternate-reverse;
animation-iteration-count: none;
animation-fill-mode: forwards;
}
@keyframes przesun_srodek {
0%   { transform: translate(45px,0); }
20% { transform: translate(45px,0); }
}
.lewy_srodek {
animation-name: przesun_prawy;
animation-duration: 3s;
animation-iteration-count: infinite;
transform-origin: 50% 50%;
animation-direction: alternate-reverse;
animation-iteration-count: none;
animation-fill-mode: forwards;
}
@keyframes przesun_prawy {
0%   { transform: translate(142px,0); }
20% { transform: translate(142px,0); }
}

任何人都知道如何解决这个问题，并且在设置动画后不会生成这条奇怪的线吗？