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

Question

[vlados096zver]

сейчас видно , что активный dot прыгает
анимируется ширина
https://stackblitz.com/edit/angular-hello-world-br...

Answer 1

[Сергей delphinpro]

https://codepen.io/delphinpro/pen/YPydwKy

Answer 2

[alexalexes]

Добавите больше ключевых кадров css в shrinkWidth, чтобы ширина изменялась не 30 -> 10, а, например, 10 -> 30 -> 10.

Comments

[vlados096zver]

Ankhena анимирование width так или иначе плохо повлияет

[vlados096zver]

Ankhena, а как тут правильно сделать?

[vlados096zver]

Ankhena, это понятно. А что?

[Алексей Уколов]

vlados096zver, сформулируйте точно и детально, в чём вы видите проблему. Если вам не нравится, например, что при анимации центральной точки двигаются крайние, то это одна проблема с одним решением. Если же, скажем, вам не нравится как именно анимируется сжатие, а всё остальное устраивает - другая и решение у неё другое.