Как плавно анимировать управляющие кнопки?

Question

[fantastikgodd]

после клика на управляющие кнопки нет плавности

https://jsfiddle.net/52gr3oun/4/

Comments

[Ankhena]

В песочнице плавно

[fantastikgodd]

Ankhena, имеется ввиду не сами итемы
а управляющие элементы

[Ankhena]

fantastikgodd, нужно изменить заголовок вопроса.

И в стилях написать transition для тех свойств, которые вы хотите анимировать (которые в принципе анимируются).
Сейчас у вас вообще нет transition

[fantastikgodd]

Ankhena, так я пробовал
112 строка
но как то коряво получается
https://jsfiddle.net/52gr3oun/5/

[Ankhena]

fantastikgodd, видно же, что анимируется :)

[fantastikgodd]

Ankhena, это да, но не так как ожидалось. виден типа глюк

[Ankhena]

fantastikgodd, вы может уже всё таки напишете, что именно хотите анимировать?

В стилях вы указали, что хотите анимировать свойство border.
У border'а сейчас изменяется только цвет с белого на голубой и обратно.
Именно это браузер и рисует плавно.
Никаких других свойств для плавного изменения вы не указали.
Как только укажете, так всё и заработает.

[Rustam Bainazarov]

fantastikgodd,

[fantastikgodd]

Рустам Байназаров, красиво, спасибо)

Answer 1

[BAN Ban]

Я обычно Keyframes использую.
вот видео:
https://www.youtube.com/watch?v=GKgOOuTL0po