Несколько способов анимирования декоративных линий в CSS:

1. Анимация подчёркивания ссылок. 2 Нужно установить для свойств text-decoration значение none и position значение relative, чтобы позиционировать линию относительно ссылки. 2 Затем добавить линию, в роли которой будет выступать нижний бордюр, и скрыть её с помощью CSS-трансформации. 2 Для этого используют псевдоэлемент ::before, чтобы скрыть линию, установив масштаб по оси X равным 0. 2 Чтобы линия появилась, при наведении курсора на ссылку нужно сделать её видимой, установив масштаб по оси X равный 1. 2
2. Изменение направления анимации линии. 2 Для этого настраивают свойство transform-origin, которое представляет исходную точку CSS-трансформации элемента. 2 По умолчанию она установлена на середину объекта, поэтому масштаб элемента изменяется от центральной точки элемента. 2 Чтобы анимация началась слева, можно установить исходную точку в крайнее левое положение (transform-origin: top left), а для анимации справа — в крайнее правое положение (transform-origin: top right). 2
3. Анимация линии SVG. 5 Эффект достигается путём анимации свойства stroke-dashoffset. 5 Для этого используют псевдоэлемент в качестве линии и анимацию SVG. 5