Как заставить CSS Translatex работать так же на Chrome и Firefox ⇐ CSS

[Anonymous]

Я изменил код из этой статьи, чтобы создать анимированную высокую линию 40px с округлыми концами, которая сокращается с длины 120px до 0 до 0, а затем расширяется до длины 120px. В начале и в конце анимации правый конец полукруга был отсоедин от линии примерно на 20px.

whatsemable, что ISelseble. «Совет» линии, чтобы переместить 140px, хотя сама линия расширяется только до 120px. Я могу решить проблему хрома, изменив этот код ... < /p>

Код: Выделить всё

  @keyframes right-animate {
0% {
transform: translateX(140px);
}
< /code>
to < /p>
  @keyframes right-animate {
0% {
transform: translateX(120px);
}

Однако в Firefox исходный кодеп работает нормально, а в модифицированном коде, правый «наконечник» линии полностью покрывается самой строкой. /> < /p>
Возможно ли, что координаты, используемые в Transtatex в Firefox, абсолютны, тогда как в хроме они относятся к текущей позиции? Как я могу создать код, который будет работать одинаково в обоих браузерах?

Подробнее здесь: https://stackoverflow.com/questions/797 ... nd-firefox