box-shadowをtransitionでアニメーションさせたときに、Firefoxでだけ意図した動きにならないことがあったのでメモ。
サンプルコード
ボタンにオンマウスした時に、押されたような動きを実装してみます。
HTML
1 | <a class="c-button" href="">ボタン</a> |
オンマウス時にbox-shadowを消して、ボタンを影の高さ分下に移動して、ボタンを押したような動きにします。
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .c-button { display: block; width: 300px; padding: 15px 0; border-radius: 27px; text-align: center; color: #ffffff; text-decoration: none; background: #3498DB; box-shadow: 0 6px #256a99; transition: 1000ms;}.c-button:hover { transform: translateY(6px); box-shadow: 0 0;} |
わかりやすいようにアニメーション速度をゆっくりにしています。
chromeやIEでは問題なかったのですが、Firefoxだけアニメーションしないでぱっと消えてしまいます。
うまくいかなかった場合のデモページ
オンマウス時の指定で色を省略していたことが原因らしく、オンマウス時にも色を指定するようにすると、Firefoxでも意図した動きになりました。
CSS
1 2 3 4 | .c-button:hover { transform: translateY(6px); box-shadow: 0 0 #256a99;} |
コメントが承認されるまで時間がかかります。