質問編集履歴
3
コードの書き換え
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -31,7 +31,6 @@
|
|
|
31
31
|
</div>
|
|
32
32
|
|
|
33
33
|
|
|
34
|
-
|
|
35
34
|
/*css*/
|
|
36
35
|
#main {
|
|
37
36
|
height: 600px;
|
|
@@ -41,25 +40,18 @@
|
|
|
41
40
|
height: 600px;
|
|
42
41
|
}
|
|
43
42
|
#main img.main_bg{
|
|
44
|
-
animation:
|
|
43
|
+
animation: fadein 8s;
|
|
45
44
|
width: 100%;
|
|
46
45
|
position: absolute;
|
|
47
46
|
z-index: 0;
|
|
48
47
|
}
|
|
49
|
-
@keyframes
|
|
48
|
+
@keyframes fadein {
|
|
50
|
-
0% {
|
|
51
|
-
opacity: 0;
|
|
49
|
+
0% { opacity: 0; }
|
|
52
|
-
}
|
|
53
|
-
100% {
|
|
54
|
-
opacity:
|
|
50
|
+
50%{ opacity: 0; }
|
|
55
|
-
|
|
51
|
+
100% { opacity: 1; }
|
|
56
52
|
}
|
|
57
53
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
54
|
#main .catch {
|
|
62
|
-
animation: fadeIn 25s infinite;
|
|
63
55
|
display: block;
|
|
64
56
|
width: 100%;
|
|
65
57
|
position: relative;
|
|
@@ -71,31 +63,26 @@
|
|
|
71
63
|
left: 50%;
|
|
72
64
|
top: 100px;
|
|
73
65
|
}
|
|
74
|
-
#main .catch
|
|
66
|
+
#main .catch .logo02 {
|
|
75
|
-
#main .catch img:nth-of-type(2) { animation-delay: 5s; }
|
|
76
|
-
|
|
77
|
-
|
|
67
|
+
animation: fadein 5s;
|
|
78
|
-
0%{ opacity: 0;}
|
|
79
|
-
100%{ opacity: 1;}
|
|
80
68
|
}
|
|
69
|
+
@keyframes fadein {
|
|
70
|
+
0%{ opacity: 0; }
|
|
71
|
+
100%{ opacity: 1; }
|
|
72
|
+
}
|
|
81
73
|
|
|
82
74
|
|
|
83
|
-
|
|
84
75
|
#main .catchcopy {
|
|
85
|
-
animation:
|
|
76
|
+
animation: fadein 8s;
|
|
86
|
-
|
|
77
|
+
position: absolute;
|
|
87
|
-
|
|
78
|
+
width: 400px;
|
|
88
|
-
|
|
79
|
+
margin-left: -200px;
|
|
89
|
-
|
|
80
|
+
left: 50%;
|
|
90
|
-
|
|
81
|
+
top: 460px;
|
|
91
82
|
}
|
|
92
|
-
@keyframes
|
|
83
|
+
@keyframes fadein {
|
|
93
|
-
0% {
|
|
94
|
-
|
|
84
|
+
0% { opacity: 0; }
|
|
95
|
-
}
|
|
96
|
-
100% {
|
|
97
|
-
|
|
85
|
+
100% { opacity: 1; }
|
|
98
|
-
}
|
|
99
86
|
}
|
|
100
87
|
```
|
|
101
88
|
|
2
誤字修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -15,10 +15,6 @@
|
|
|
15
15
|
・ロゴ変化部分が繰り返しアニメーション表示されてしまう。
|
|
16
16
|
logo01.png → logo02.png に変化後はずっとlogo02.pngのまま停止させたい
|
|
17
17
|
|
|
18
|
-
・ロゴ部分がスムーズに表示されない。
|
|
19
|
-
最初の方が不透明度が低く、だんだんと意図するスピードの切り替わりになる。
|
|
20
|
-
|
|
21
|
-
|
|
22
18
|
### 該当のソースコード
|
|
23
19
|
|
|
24
20
|
```ここに言語名を入力
|
1
誤字修正
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
|
|
1
|
+
CSS animationの実装について（ループ処理をなくしたい）
|
body
CHANGED
|
@@ -12,11 +12,13 @@
|
|
|
12
12
|
|
|
13
13
|
### 発生している問題・エラーメッセージ
|
|
14
14
|
|
|
15
|
-
ロゴ変化部分が繰り返しアニメーション表示されてしまう。
|
|
15
|
+
・ロゴ変化部分が繰り返しアニメーション表示されてしまう。
|
|
16
16
|
logo01.png → logo02.png に変化後はずっとlogo02.pngのまま停止させたい
|
|
17
17
|
|
|
18
|
+
・ロゴ部分がスムーズに表示されない。
|
|
18
|
-
|
|
19
|
+
最初の方が不透明度が低く、だんだんと意図するスピードの切り替わりになる。
|
|
19
20
|
|
|
21
|
+
|
|
20
22
|
### 該当のソースコード
|
|
21
23
|
|
|
22
24
|
```ここに言語名を入力
|
|
@@ -61,7 +63,7 @@
|
|
|
61
63
|
|
|
62
64
|
|
|
63
65
|
#main .catch {
|
|
64
|
-
animation:
|
|
66
|
+
animation: fadeIn 25s infinite;
|
|
65
67
|
display: block;
|
|
66
68
|
width: 100%;
|
|
67
69
|
position: relative;
|
|
@@ -76,7 +78,7 @@
|
|
|
76
78
|
#main .catch img:nth-of-type(1) { animation-delay: 0s; }
|
|
77
79
|
#main .catch img:nth-of-type(2) { animation-delay: 5s; }
|
|
78
80
|
|
|
79
|
-
@keyframes
|
|
81
|
+
@keyframes fadeIn {
|
|
80
82
|
0%{ opacity: 0;}
|
|
81
83
|
100%{ opacity: 1;}
|
|
82
84
|
}
|