Как сделать подобную анимацию линии под текстом?

Question

[Kipsi]

Здравствуйте. Подскажите пожалуйста как сделать подобную анимацию линии под текстом что бы в обычном состоянии линии не было, а при наведении она постепенно плавно появлялась как бы выскальзывая от левого края к правому , а когда убираешь мышку она исчезала так же плавно и постепенно от левого края к правому?

Answer 1

[Rustam Bainazarov]

От легких обрывов анимации при быстром наведении/отведении никуда не деться, ибо мы меняем значение свойства transform-origin, чтобы сделать ваш эффект. Его (transform-origin) в данном случае анимировать не стоит вовсе, иначе вообще вся анимация ломается.

Comments

[Vadim Rublev]

Во какая фича! - Тут если фокус в области примера и в ней нет вертикального скролла - то прокручивается вся страница; а если в области есть вертикальный скролл - то прокручивается только область (страница стоит на месте всегда).
А как это сделано? )