質問編集履歴

1

ta1g3n

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後の状態に値を上書きできなくて困っています。状態を上書きする方法はありませんか?
  • CSS

    13972 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る