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

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

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

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

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

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

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

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

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

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

jurvrn,
:-?
transition: transform 0.3s ease-in-out;

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