ta1g3n score 35
2019/05/06 19:51 投稿
| animation-fill-mode:forwards; でのアニメーション後の値をhover時に上書きしたい |
| SVGのfillの色をロード時にanimationでフェードインさせ、hover時に色を変えるデザインを作りたいです。 |
| ```HTML |
| <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" id="hoge"> |
| <circle cx="100" cy="100" r="100"/> |
| </svg> |
| ``` |
| ```CSS |
| @keyframes fadein{ |
| 0%{ |
| fill:transparent; |
| } |
| 100%{ |
| fill:#000; |
| } |
| } |
| #hoge{ |
| animation:fadein 1s linear 0s forwards alternate; |
| } |
| #hoge:hover{ |
| fill:#777 |
| fill:#777 !important; |
| } |
| ``` |
| ホバー状態にしたときに色が#777になることを期待したのですが、animation後の状態に値を上書きできなくて困っています。状態を上書きする方法はありませんか？ |
