如何让一个元素在屏幕尺寸缩小的时候，能回到原来的位置做动画？

Question

大家好^^我为自己设计的一个SVG标志制作了一个滑动动画。 使用媒体查询在屏幕尺寸上用关键帧动画将图片向左滑动并不困难。 然而，我无法通过动画或过渡延迟等方式让SVG滑回中心（原始位置）。 当换回较小的媒体查询尺寸时，SVG只是简单地跳到原来的位置（页面上的主标志）。

我一直没能找到解决这个问题的方法。 不过，下面是一个代码的链接。 如果你认为你可能会帮助，我将真诚地感谢它。 谢谢。

https:/codepen.ioshaunbolakpenRwWmgVK

/* ============================================= */
/*          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;
  }
}

我已经检查过了，效果不错... ...