Выдвижение блока с текстом без искажений

[jurvrn]

При рендеринге видно как текcт подстраивается под анимацию при выезде блока, немного искажается (возможно что только в Firefox).
https://jsfiddle.net/jurvrn/b7um102r/2/
Можно ли переделать CSS на JavaScript или JQuery чтобы искажения при анимации пропали?

[рони]

немного искажается.

в каком браузере?

[jurvrn]

рони,
Очевидно это заметно в "настольном" firefox. Это можно описать как бледный текст становится темнее по окончании transition

[рони]

jurvrn,
не могу увидеть ... но попробуйте сбросить стили ... добавить в самое начало

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/reseter.css/1.1.2/reseter.min.css'>

[jurvrn]

рони,
Попробую,
Вы если замедлите, то возможно артефакт будет виднее

[jurvrn]

рони,
не помогло, вот видеоскрин сделал - этот артефакт видно (как буквы темнеют)
https://vimeo.com/547455193
если что на сайте можно глянуть - jurvrn.ru

[рони]

jurvrn,
transition: all 0.3s ease-in-out; замените на transform

[jurvrn]

рони,
All на transform ?
Просто судя по https://html5book.ru/css3-transform/ без transition нельзя

[рони]

jurvrn,

transition: transform 0.3s ease-in-out;

[jurvrn]

jurvrn,

transition: transform 0.3s ease-in-out;

без изменений
спасибо, но я бы хотел переделать на JQuery - можно? просто slideUp/slideDown знаю, а slideLeft/slideRight вроде такого нет