How to make an svg element smoothly change color on hover?

Question

Layout

https://codepen.io/mashutaklencheva/pen/QWOBVqG
Smooth fading works, and color change on hover - sharp. How to make smooth and start state?

Answer 1

Set the default value of the fill property in styles:

.spoiler__button path {
  transition: fill .7s ease-in-out;
+ fill: #ECECEC;
}