回答編集履歴
1
追記しました。
answer
CHANGED
|
@@ -30,7 +30,13 @@
|
|
|
30
30
|
}
|
|
31
31
|
```
|
|
32
32
|
|
|
33
|
+
[1]
|
|
33
|
-
|
|
34
|
+
box-shadowの「inset」アニメーションにならない理由のようです。どうしても上部に影がほしいのであれば`box-shadow: 0 -10px 0 0 rgba(15,65,101,1);`などを記述しつつ、paddingの量を調整する...、などの対応が必要になりそうです。
|
|
34
35
|
|
|
36
|
+
(根拠となるURLを見つけられていないのですが、私見として..)
|
|
37
|
+
transitionなどアニメーションの指定可能なプロパティは数値や色などです (参照: [Animatable CSS properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties))。
|
|
38
|
+
displayがアニメーションできないのと同様、box-shadowの「inset」値の有無はアニメーションできないのではないか、と推測します。
|
|
39
|
+
|
|
40
|
+
[2]
|
|
35
|
-
|
|
41
|
+
「:active」でないとき、`top: 0;`の記述が必要です。(topの初期値は0でなくautoなので)
|
|
36
|
-
|
|
42
|
+
参考URL: [https://developer.mozilla.org/ja/docs/Web/CSS/top](https://developer.mozilla.org/ja/docs/Web/CSS/top)
|