Какие существуют способы анимирования декоративных линий в CSS?

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

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