如何在屏幕尺寸减小时使元素动画恢复到原始位置?

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;
}
}

我已经检查过了，效果很好...