animation-fill-mode:forwards; でのアニメーション後の値をhover時に上書きしたい

Question

SVGのfillの色をロード時にanimationでフェードインさせ、hover時に色を変えるデザインを作りたいです。

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" id="hoge">
  <circle cx="100" cy="100" r="100"/>
</svg>

@keyframes fadein{
    0%{
        fill:transparent;
    }
    100%{
        fill:#000;
    }
}
#hoge{
    animation:fadein 1s linear 0s forwards alternate;
}
#hoge:hover{
    fill:#777 !important;
}

ホバー状態にしたときに色が#777になることを期待したのですが、animation後の状態に値を上書きできなくて困っています。状態を上書きする方法はありませんか？

Answer 1

以下のようなセレクタ指定でいけるかと思います。

#hoge circle:hover{
  fill: #777;
}