回答編集履歴
3
追記
answer
CHANGED
|
@@ -1,7 +1,3 @@
|
|
|
1
|
-
> 1秒たったらフェードインしてきて表示のまま固定
|
|
2
|
-
|
|
3
|
-
ということは繰り返さないので
|
|
4
|
-
|
|
5
1
|
```CSS
|
|
6
2
|
|
|
7
3
|
/* 「TopToBottom」の動作内容 */
|
|
@@ -27,4 +23,5 @@
|
|
|
27
23
|
}
|
|
28
24
|
|
|
29
25
|
```
|
|
30
|
-
[サンプル](https://codepen.io/asuchi0819/pen/RwwgzoX?editors=1100#0)
|
|
26
|
+
[サンプル](https://codepen.io/asuchi0819/pen/RwwgzoX?editors=1100#0)
|
|
27
|
+
[animation fill mode / MDN](https://developer.mozilla.org/ja/docs/Web/CSS/animation-fill-mode)
|
2
追記
answer
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
> 1秒たったらフェードインしてきて表示のまま固定
|
|
2
|
+
|
|
3
|
+
ということは繰り返さないので
|
|
4
|
+
|
|
1
5
|
```CSS
|
|
2
6
|
|
|
3
7
|
/* 「TopToBottom」の動作内容 */
|
|
@@ -19,6 +23,7 @@
|
|
|
19
23
|
animation-delay : 1s;/* 変化開始の時間 */
|
|
20
24
|
animation-name: TopToBottom;/* アニメーション名 */
|
|
21
25
|
animation-iteration-count: 1;/* アニメーションの繰り返し（無限）*/
|
|
26
|
+
animation-fill-mode: forwards; /*これで値を保持*/
|
|
22
27
|
}
|
|
23
28
|
|
|
24
29
|
```
|
1
追記
answer
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
|
|
15
15
|
/* 「TopToBottom」を適用する箇所 */
|
|
16
16
|
.effect-fade {
|
|
17
|
-
opacity: 0;/*
|
|
17
|
+
opacity: 0;/* ここを追加 */
|
|
18
18
|
animation-duration: 2s;/* アニメーション時間 */
|
|
19
19
|
animation-delay : 1s;/* 変化開始の時間 */
|
|
20
20
|
animation-name: TopToBottom;/* アニメーション名 */
|