Как сделать так, чтобы элемент вернулся в исходное положение при уменьшении размера экрана?

Question

Hello All ^^ Я создал слайд-анимацию для SVG lo go, который я спроектировал. Сдвинуть изображение влево с анимацией по ключевым кадрам по размеру экрана с помощью медиа-запросов не составило труда. Однако я не могу вернуть SVG в центр (исходное положение) с помощью анимации или задержки перехода и т. Д. c. После возврата к меньшим размерам медиа-запросов SVG просто перескакивает в исходное положение (main lo go на странице).

Мне не удалось найти способ решить эту проблему. Однако ссылка на код находится ниже. Если вы думаете, что можете помочь, я был бы искренне признателен. Спасибо.

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

Я проверил это, и он работает хорошо ...