回答編集履歴
5
追記&文言の編集
test
CHANGED
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
|
|
87
87
|
|
|
88
88
|
|
|
89
|
-
- `display: none; → block;` : 要素そのものが
|
|
89
|
+
- `display: none; → block;` : 要素そのものが急に現れる、すなわち位置が変わるので論外。(質問者様が考えられた方法でも多分こうなります。)
|
|
90
90
|
|
|
91
91
|
- `visibility: hidden; → visible;` : アニメーションに設定はできるが、細かい変化にはできない
|
|
92
92
|
|
4
リンク名の付け直し
test
CHANGED
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
|
|
35
35
|
|
|
36
36
|
|
|
37
|
-
[jsFiddle](https://jsfiddle.net/namnium1125/4d3aqyeh/)
|
|
37
|
+
[jsFiddle : cssアニメーション 一気に](https://jsfiddle.net/namnium1125/4d3aqyeh/)
|
|
38
38
|
|
|
39
39
|
|
|
40
40
|
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
|
|
43
43
|
|
|
44
44
|
|
|
45
|
-
[jsFiddle](https://jsfiddle.net/namnium1125/4d3aqyeh/7/)
|
|
45
|
+
[jsFiddle : cssアニメーション 徐々に](https://jsfiddle.net/namnium1125/4d3aqyeh/7/)
|
|
46
46
|
|
|
47
47
|
|
|
48
48
|
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
|
|
67
67
|
|
|
68
68
|
|
|
69
|
-
[jsFiddle](https://jsfiddle.net/namnium1125/ytobqs6n/)
|
|
69
|
+
[jsFiddle : jQuery 一気に](https://jsfiddle.net/namnium1125/ytobqs6n/)
|
|
70
70
|
|
|
71
71
|
|
|
72
72
|
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
|
|
75
75
|
|
|
76
76
|
|
|
77
|
-
[jsFiddle](https://jsfiddle.net/namnium1125/ytobqs6n/7/)
|
|
77
|
+
[jsFiddle : jQuery 徐々に](https://jsfiddle.net/namnium1125/ytobqs6n/7/)
|
|
78
78
|
|
|
79
79
|
|
|
80
80
|
|
3
検証の終了に伴い書き換え
test
CHANGED
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
|
|
89
89
|
- `display: none; → block;` : 要素そのものがなくなる、すなわち位置が変わるので論外。
|
|
90
90
|
|
|
91
|
-
- `visibility: hidden; → visible;` :
|
|
91
|
+
- `visibility: hidden; → visible;` : アニメーションに設定はできるが、細かい変化にはできない
|
|
92
92
|
|
|
93
93
|
- `opacity: 0; → 1;` : いい感じで変化してくれる。`img`要素に適しそう。
|
|
94
94
|
|
2
スペルミス
test
CHANGED
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
|
|
89
89
|
- `display: none; → block;` : 要素そのものがなくなる、すなわち位置が変わるので論外。
|
|
90
90
|
|
|
91
|
-
- `visibi
|
|
91
|
+
- `visibility: hidden; → visible;` : (検証中。とりあえず今言えるのは細かい値を調整できない)
|
|
92
92
|
|
|
93
93
|
- `opacity: 0; → 1;` : いい感じで変化してくれる。`img`要素に適しそう。
|
|
94
94
|
|
1
ちょっとした編集
test
CHANGED
|
@@ -46,7 +46,11 @@
|
|
|
46
46
|
|
|
47
47
|
|
|
48
48
|
|
|
49
|
+
#
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
49
|
-
jQueryで実装する場合はこうですかね。
|
|
53
|
+
jQueryで実装する場合はこうですかね。ただまぁ、古いブラウザにも対応できるかもしれませんが、わざわざcssアニメーションを使わずこちらで実装するメリットは薄いと思います。
|
|
50
54
|
|
|
51
55
|
|
|
52
56
|
|
|
@@ -70,4 +74,24 @@
|
|
|
70
74
|
|
|
71
75
|
|
|
72
76
|
|
|
73
|
-
[jsFiddle](https://jsfiddle.net/namnium1125/ytobqs6n/
|
|
77
|
+
[jsFiddle](https://jsfiddle.net/namnium1125/ytobqs6n/7/)
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
#
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
見た目をいじるcssは色々ありますが、
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
- `display: none; → block;` : 要素そのものがなくなる、すなわち位置が変わるので論外。
|
|
90
|
+
|
|
91
|
+
- `visibirity: hidden; → visible;` : (検証中。とりあえず今言えるのは細かい値を調整できない)
|
|
92
|
+
|
|
93
|
+
- `opacity: 0; → 1;` : いい感じで変化してくれる。`img`要素に適しそう。
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
個人的にはこんなイメージです。
|