Как реализовать появление горизонтальной линии с эффектом роста в ширину?

Question

[Alexis_D]

Есть hr, необходимо реализовать появление, допустим, справа налево и так, чтобы линия увеличивалась постепенно в ширину, но анимацию необходимо начинать только тогда, когда доскроллил до определенного блока

Answer 1

[Сергей Горячев]

Ну, как-то так, например, через animation.
https://jsfiddle.net/tco41obk/

Немного доработал, чтобы линия не пропадала.
https://jsfiddle.net/gw534udp/

Answer 2

[Конан Варвар]

Наведите на зеленый блок: https://jsfiddle.net/93k0rvpm/

Answer 3

[Alexander Pushkarev]

Как-то так - https://codepen.io/AXP/pen/WEMLXY