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

Question

[valya0502]

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

Comments

[shmatuan]

Вот очень много видов готовых анимаций - выбирайте и вставляейте) https://daneden.github.io/animate.css/

Answer 1

[Максим Тимофеев]

Надо написать код, который реализует задуманную анимацию.
Анимации можно реализовать средствами:
- css
- js
- svg
Выбирайте любой вариант вбивайте в поиск "анимация {{variant}}>" и наслаждайтесь обилием учебников, примеров и т.д.

Answer 2

[WapSter]

много вариантов, но могу натолкнуть на мысль, верстаете изначально все линии, задаете им opacity: 0; transition: opacity 300ms; при выборе нужного элемента при помощи :hover или кодом js даете нужной лини opacity: 1;

Comments

[valya0502]

Добрый день!
А как подскажете верстать линии?
Блок а к нему потом бефор и афтер? а то они под разными углами и в конце круг.
Или может другой вариант?
Спасибо

[WapSter]

valya0502, пример. Только у данного метода есть минус, нужно заранее знать размеры изображения, что бы точно поставить эти линии. Может есть методы для резиновой верстки, но таких я не знаю.