回答編集履歴
3
追記
test
CHANGED
|
@@ -1,11 +1,3 @@
|
|
|
1
|
-
> 1秒たったらフェードインしてきて表示のまま固定
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
ということは繰り返さないので
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
1
|
```CSS
|
|
10
2
|
|
|
11
3
|
|
|
@@ -57,3 +49,5 @@
|
|
|
57
49
|
```
|
|
58
50
|
|
|
59
51
|
[サンプル](https://codepen.io/asuchi0819/pen/RwwgzoX?editors=1100#0)
|
|
52
|
+
|
|
53
|
+
[animation fill mode / MDN](https://developer.mozilla.org/ja/docs/Web/CSS/animation-fill-mode)
|
2
追記
test
CHANGED
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
> 1秒たったらフェードインしてきて表示のまま固定
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
ということは繰り返さないので
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
1
9
|
```CSS
|
|
2
10
|
|
|
3
11
|
|
|
@@ -40,6 +48,8 @@
|
|
|
40
48
|
|
|
41
49
|
animation-iteration-count: 1;/* アニメーションの繰り返し（無限）*/
|
|
42
50
|
|
|
51
|
+
animation-fill-mode: forwards; /*これで値を保持*/
|
|
52
|
+
|
|
43
53
|
}
|
|
44
54
|
|
|
45
55
|
|
1
追記
test
CHANGED
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
|
|
31
31
|
.effect-fade {
|
|
32
32
|
|
|
33
|
-
opacity: 0;/*
|
|
33
|
+
opacity: 0;/* ここを追加 */
|
|
34
34
|
|
|
35
35
|
animation-duration: 2s;/* アニメーション時間 */
|
|
36
36
|
|