Firefoxでbox-shadowのアニメーションが発生しない不具合

box-shadowをtransitionでアニメーションさせたときに、Firefoxでだけ意図した動きにならないことがあったのでメモ。

サンプルコード

ボタンにオンマウスした時に、押されたような動きを実装してみます。

HTML

<a class="c-button" href="">ボタン</a>

オンマウス時にbox-shadowを消して、ボタンを影の高さ分下に移動して、ボタンを押したような動きにします。

CSS

.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

.c-button:hover {
	transform: translateY(6px);
	box-shadow: 0 0 #256a99;
}

対応後のデモページ