SVGのfillの色をロード時にanimationでフェードインさせ、hover時に色を変えるデザインを作りたいです。
HTML
1<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" id="hoge"> 2 <circle cx="100" cy="100" r="100"/> 3</svg>
CSS
1@keyframes fadein{ 2 0%{ 3 fill:transparent; 4 } 5 100%{ 6 fill:#000; 7 } 8} 9#hoge{ 10 animation:fadein 1s linear 0s forwards alternate; 11} 12#hoge:hover{ 13 fill:#777 !important; 14}
ホバー状態にしたときに色が#777になることを期待したのですが、animation後の状態に値を上書きできなくて困っています。状態を上書きする方法はありませんか?
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。