如何在屏幕尺寸缩小时让元素动画回到原始位置？

Question

大家好^^ 我为我设计的 SVG 徽标创建了幻灯片动画。使用媒体查询在屏幕大小上使用关键帧动画将图像向左滑动并不困难。但是，我无法让 SVG 通过动画或过渡延迟等方式滑回中心（原始位置）。在更改回较小的媒体查询大小后，SVG 只是跳转到其原始位置（页面上的主徽标）。

我无法找到解决此问题的方法。但是，下面是代码笔的链接。如果您认为您可以提供帮助，我将由衷地感谢您。谢谢。

https://codepen.io/shaunbolak/pen/RwWmgVK

/* ============================================= */
/*          SVG Keyframes                        */
/* ============================================= */

@keyframes offset {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes mobile-path-fill {
    100% {
        fill: $logo-main-path-color;
    }
}


@keyframes fill-desktop {
    100% {
        fill: $logo-alternate-path-color;
    }
}

@keyframes move-left {
    100% {
        transform: translateX(-118%);
    }
}

/* ============================================= */
/*          Main logo                            */
/* ============================================= */


#logo {
    padding-top: 15px;
    height: 150px;
    width: 350px; 

    @include for-size(desktop-up) {
        animation: move-left 2s forwards;
        padding-top: 20px;
        height: 120px;
        width: 300px;
        transition: width 1s;
    }

    @include for-size(larger-desktop-up) {
        width: 350px;
        transition: width 1s;
    }

    @include for-size(big-desktop-up) {
        width: 400px;
        transition: width 1s;
    }
}


#logoFill {
    fill: $logo-main-fill;
    stroke: $logo-main-fill;

    @include for-size(desktop-up) {
        animation: fill-desktop 1.5s 1.2s forwards;
    }
}

.logo-stroke {
    stroke: $logo-main-path-color;
    stroke-width: 1;
    stroke-dasharray: 325;
    stroke-dashoffset: 325;
    animation: offset 3s linear forwards, mobile-path-fill 1.2s 3s forwards;
}

Answer 1

添加：

@keyframes move-right {
  from {
    transform: translateX(-118%);
  } to {
    transform: translateX(0);
  }
}

然后：

@media (max-width: 1200px) {
  #logo {
    animation: move-right 2s;
    padding-top: 20px;
    height: 120px;
    width: 300px;
    transition: width 1s;
  }
}

我已经检查过了，它运行良好......