回答編集履歴
1
コード追記
test
CHANGED
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
「滑らか」の定義は不明確ですか、例えば、透明から徐々に不透明に変化する(フェイドイン)ということなら、`opacity`を使うといいでしょう。
|
|
4
4
|
|
|
5
5
|
|
|
6
|
+
|
|
7
|
+
※コメントを受けて、上から下に移動するアニメーションも追加しました。
|
|
6
8
|
|
|
7
9
|
|
|
8
10
|
|
|
@@ -16,7 +18,9 @@
|
|
|
16
18
|
|
|
17
19
|
visibility: visible;
|
|
18
20
|
|
|
19
|
-
opacity: 1; /*追加*/
|
|
21
|
+
opacity: 1; /*追加*/
|
|
22
|
+
|
|
23
|
+
top: 80px; /*追加*/
|
|
20
24
|
|
|
21
25
|
}
|
|
22
26
|
|
|
@@ -32,7 +36,7 @@
|
|
|
32
36
|
|
|
33
37
|
position: absolute;
|
|
34
38
|
|
|
35
|
-
top:
|
|
39
|
+
top: 50px; /*修正*/
|
|
36
40
|
|
|
37
41
|
background: #fff;
|
|
38
42
|
|
|
@@ -50,9 +54,9 @@
|
|
|
50
54
|
|
|
51
55
|
box-sizing: border-box;
|
|
52
56
|
|
|
53
|
-
transition:
|
|
57
|
+
transition: all 1s; /*追加*/
|
|
54
58
|
|
|
55
|
-
opacity: 0;
|
|
59
|
+
opacity: 0; /*修正*/
|
|
56
60
|
|
|
57
61
|
z-index: 1;
|
|
58
62
|
|
|
@@ -64,8 +68,6 @@
|
|
|
64
68
|
|
|
65
69
|
}
|
|
66
70
|
|
|
67
|
-
|
|
68
|
-
|
|
69
71
|
```
|
|
70
72
|
|
|
71
73
|
|