回答編集履歴

1

追記しました。

2020/07/11 02:50

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -62,10 +62,22 @@
62
62
 
63
63
 
64
64
 
65
+ [1]
66
+
65
- - box-shadowの「inset」アニメーションにならない理由のようです。どうしても上部に影がほしいのであれば`box-shadow: 0 -10px 0 0 rgba(15,65,101,1);`などを記述しつつ、paddingの量を調整する...、などの対応が必要になりそうです。
67
+ box-shadowの「inset」アニメーションにならない理由のようです。どうしても上部に影がほしいのであれば`box-shadow: 0 -10px 0 0 rgba(15,65,101,1);`などを記述しつつ、paddingの量を調整する...、などの対応が必要になりそうです。
66
68
 
67
69
 
68
70
 
69
- - 「:active」でないとき、`top: 0;`記述が必要です。(topの初期値は0でなくautoなので)
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
- 参考URL: [https://developer.mozilla.org/ja/docs/Web/CSS/top](https://developer.mozilla.org/ja/docs/Web/CSS/top)
83
+ 参考URL: [https://developer.mozilla.org/ja/docs/Web/CSS/top](https://developer.mozilla.org/ja/docs/Web/CSS/top)