回答編集履歴
1
追記しました。
test
CHANGED
|
@@ -62,10 +62,22 @@
|
|
|
62
62
|
|
|
63
63
|
|
|
64
64
|
|
|
65
|
+
[1]
|
|
66
|
+
|
|
65
|
-
|
|
67
|
+
box-shadowの「inset」アニメーションにならない理由のようです。どうしても上部に影がほしいのであれば`box-shadow: 0 -10px 0 0 rgba(15,65,101,1);`などを記述しつつ、paddingの量を調整する...、などの対応が必要になりそうです。
|
|
66
68
|
|
|
67
69
|
|
|
68
70
|
|
|
69
|
-
|
|
71
|
+
(根拠となるURLを見つけられていないのですが、私見として..)
|
|
70
72
|
|
|
73
|
+
transitionなどアニメーションの指定可能なプロパティは数値や色などです (参照: [Animatable CSS properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties))。
|
|
74
|
+
|
|
75
|
+
displayがアニメーションできないのと同様、box-shadowの「inset」値の有無はアニメーションできないのではないか、と推測します。
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
[2]
|
|
80
|
+
|
|
81
|
+
「:active」でないとき、`top: 0;`の記述が必要です。(topの初期値は0でなくautoなので)
|
|
82
|
+
|
|
71
|
-
|
|
83
|
+
参考URL: [https://developer.mozilla.org/ja/docs/Web/CSS/top](https://developer.mozilla.org/ja/docs/Web/CSS/top)
|