Есть ли способ найти текущую позицию div с помощью CSS translate?

Question

В настоящее время у меня есть компонент HTML, который содержит простой div с текстом и фоном на карте. Если текст внутри div слишком длинный для карты, у меня есть чистая анимация CSS, которая автоматически прокручивает текст назад и вперед при наведении курсора мыши, чтобы его можно было легко прочитать. Однако, когда мышь перестает зависать над элементом div, текст неловко возвращается в исходное положение. Я ищу способ сделать так, чтобы он хорошо прокручивался обратно в исходное положение, когда мышь больше не зависает над текстом.

Проблема в том, что я не уверен, есть ли способ найти текущая позиция текста, поэтому я могу использовать ее в качестве отправной точки для анимации CSS. Я немного новичок в использовании CSS анимации. Чистое CSS решение было бы предпочтительным, поскольку остальная часть анимации уже просто CSS, но если нет, то я не возражаю против использования некоторых JavaScript.

Вот простой HTML элемент, с которым я работаю:

      <div className='branch-ribbon-container'><p className='branch-ribbon-text'>{`Branch: ${branch}`}</p></div>

Вот CSS, который у меня есть:

.branch-ribbon-container {
  background-color: rgb(72, 74, 212);
  height: 20px;
  transform: translateY(-16px);
  padding-bottom: -10px;
}

.branch-ribbon-text {
  color: rgb(235, 235, 235);
  font-family: Arial, Helvetica, sans-serif;
  text-indent: 1px;
  overflow-x: hidden;
  white-space: nowrap;
  width: fit-content;
  margin-bottom: 0px;
}

.branch-ribbon-text:hover {
  -moz-animation: scrollText 10s linear infinite;
  -webkit-animation: scrollText 10s linear infinite;
  animation: scrollText 10s linear infinite;
}

.branch-ribbon-text:not(:hover) {
  /*Have the text scroll back to the original position here*/
}

@keyframes scrollText {
  0% { 
    -moz-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    transform: translateX(0%) 
  }

  50% {
    -moz-transform: translateX(-97%);
    -webkit-transform: translateX(-97%);
    transform: translateX(-97%); 
  }

  100% { 
    -moz-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    transform: translateX(0%); 
  }
}