Как при ховере сделать одновременный эффект шрифта и svg?

Question

[Сергей К]

Как при ховере сделать одновременный эффект шрифта и svg?
сейчас первой срабатывает svg а потом шрифт, а как сделать эффект одинаковым?
https://codepen.io/sergej-korolew/pen/wvjVYdO?edit...

Answer 1

[historydev]

Comments

[Сергей К]

а а чем транзишн с данном случае не верный?

[historydev]

Сергей К, вы причину не одновременного изменения искали, вот она.

[Сергей К]

Владимир, а как сделать чтобы одновременно менялось подскажите пожалуйста

[historydev]

Сергей К, поправил ответ

[Сергей К]

Владимир, это получается у svg есть какой то свой duration по умолчанию?

[historydev]

Сергей К, понятия не имею

Answer 2

[Ankhena]

Вы же на кнопку повесили transition, а на svg - нет. С чего бы им изменяться одновременно и одинаково?

1. Нет смысла вешать all, если изменяется одно свойство, его и указывайте.
2. div не может быть дочерним элементом button, лучше заменить на span.

Comments

[Сергей К]

https://codepen.io/sergej-korolew/pen/wvjVYdO?edit...
div заменил на span в svg транзишен добавил но все равно не равномерно. В чем может быть дело?

[Ankhena]

Сергей К, так равномерно?
https://codepen.io/AnnaSummer/pen/zYaNbgW

[Сергей К]

Ankhena, спасибо, исправьте ответ в ответах)) чтобы я мог кликнуть как решение

[Ankhena]

Сергей К, Сергей, вы не поняли.
Я только увеличила размер и поменчла цвета на одинаковые исходные и одинаковые конечные, чтобы показать вам, что анимации и так уже равномерные.
Но из-за разных "расстояний" между цветами кажется, что их длительность разная))

Так что, менять в самом ответе особо нечего.

[Сергей К]

Ankhena, спасибо я понял))