CSS3 анимация - изменение значений для перевода

Question

Я создал интерактивную карту с использованием CSS3-анимации, используя top :; дно:; et c ... для перемещения анимации. Поскольку это делает движение анимации не плавным, я понял, что мне нужно использовать translate.

Я начал это делать, однако, похоже, я использую высокие процентные числа. Это правильно или я что-то упустил?

Например, для одной анимации я использую следующие значения: «transform: translate (660%, 580%)»; Это правильно?

Можно ли использовать такие высокие значения?

Моя карта здесь: - https://www.ec-projects.co.uk/map/

Я также создал быстрое перо , чтобы вы могли понять, что я имею в виду

Я добавил кого-то из кода, чтобы показать пример того, что я имею в виду: -

HTML

    <div class="desk-map">
      <img src="https://www.ec-projects.co.uk/map/images/map.png" />

      <div class="animations">
        <div class="train"></div>
      </div>

    </div>

CSS

  .desk-map {width:70%;}

  .desk-map img {width:100%;}
   .train {
      width: 27.5%;
      height: 19%;
      background: url(https://www.ec-projects.co.uk/map/images/train.svg);
      background-repeat: no-repeat;
      background-size: contain;
      top: 21.5%;
      left: 23.5%;
      position: absolute;
      z-index: 999;
      animation: train 28s infinite;
    }


  @keyframes train {
  100%{    transform: translate(120%, 420%);}
    }