css-transitions - :active の box-shadow での CSS3 トランジション

Question

:active を使用して、ボックス シャドウの変化を持続時間と遅延でアニメーション化することは可能ですか。

持続時間に合わせて :hover の色が変わります。どうやら、同じアプローチは box-shadow では機能しません。

私はjsを介してクラスを追加しようとしました。:active クラスとメイン クラスで期間を設定してみました。やってみtransition: box shadow 1s transition-duration: 1sました。そして、さらにいくつかのもの。

完全なコードは codepen http://cdpn.io/pKJmCにあります。

それで、何かアイデアはありますか？

ありがとう

Answer 1

遷移元のデフォルト状態を与える必要があります。あなたはすでにbox-shadow円を持っていますが、インセット box-shadowはありません。円にゼロに設定されたインセット ボックス シャドウを追加します。

.ball1,
.ball2,
.ball3 {
    box-shadow: inset 0 0 0 #222, 0px 10px 20px -10px #222;
}