質問編集履歴
3
animationの設定と<code>を追加しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -17,6 +17,8 @@
|
|
|
17
17
|
|
|
18
18
|
|
|
19
19
|
|
|
20
|
+
|
|
21
|
+
```
|
|
20
22
|
```css
|
|
21
23
|
header {
|
|
22
24
|
height: 70px;
|
|
@@ -94,4 +96,5 @@
|
|
|
94
96
|
90% {opacity: 0; transform: scale(1.1);}
|
|
95
97
|
100% {opacity: 0;}
|
|
96
98
|
}
|
|
99
|
+
|
|
97
100
|
```
|
2
codeのやり直し
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -93,4 +93,5 @@
|
|
|
93
93
|
80% {opacity: 1;}
|
|
94
94
|
90% {opacity: 0; transform: scale(1.1);}
|
|
95
95
|
100% {opacity: 0;}
|
|
96
|
-
}
|
|
96
|
+
}
|
|
97
|
+
```
|
1
animationの設定と<code>を追加しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
してみたのですが、改善しないままになっています。
|
|
9
9
|
何か良案はありませんでしょうか。よろしくお願い致します。
|
|
10
10
|
|
|
11
|
+
```html
|
|
11
12
|
<header>
|
|
12
13
|
<h1 id="logo"><img></h1>
|
|
13
14
|
<div class="catchcopy"><p>キャッチコピー</p></div>
|
|
@@ -16,7 +17,7 @@
|
|
|
16
17
|
|
|
17
18
|
|
|
18
19
|
|
|
19
|
-
|
|
20
|
+
```css
|
|
20
21
|
header {
|
|
21
22
|
height: 70px;
|
|
22
23
|
background: #00ABEB;（他ページで必要なため）
|
|
@@ -42,4 +43,54 @@
|
|
|
42
43
|
background: url("../images/img.jpg") no-repeat center center/cover;
|
|
43
44
|
/*最初の１枚目（土台画像）*/
|
|
44
45
|
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/*３枚画像の共通設定*/
|
|
49
|
+
.slide1,.slide2,.slide3 {
|
|
50
|
+
animation-duration: 30s; /*実行する時間。「s」は秒の事。*/
|
|
51
|
+
animation-iteration-count:infinite; /*実行する回数。「infinite」は無限に繰り返す意味。*/
|
|
52
|
+
position: absolute;left:0px;top:0px;width: 100%;height: 100%;
|
|
53
|
+
animation-fill-mode: both;
|
|
54
|
+
animation-timing-function: linear;
|
|
55
|
+
animation-delay: 3s;
|
|
56
|
+
}
|
|
57
|
+
/*１枚目*/
|
|
58
|
+
.slide1 {
|
|
59
|
+
animation-name: slide1; /*上で設定しているキーフレーム（keyframes）の名前*/
|
|
60
|
+
}
|
|
61
|
+
/*２枚目*/
|
|
62
|
+
.slide2 {
|
|
63
|
+
animation-name: slide2; /*上で設定しているキーフレーム（keyframes）の名前*/
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.slide3 {
|
|
67
|
+
animation-name: slide3; /*上で設定しているキーフレーム（keyframes）の名前*/
|
|
68
|
+
}
|
|
69
|
+
/*１枚目*/
|
|
70
|
+
@keyframes slide1 {
|
|
71
|
+
0% {opacity: 0; transform: scale(1);}
|
|
72
|
+
10% {opacity: 1;}
|
|
73
|
+
40% {transform: scale(1.1);}
|
|
74
|
+
50% {opacity: 1;}
|
|
75
|
+
60% {opacity: 0;}
|
|
76
|
+
100% {opacity: 0;}
|
|
77
|
+
}
|
|
78
|
+
/*２枚目*/
|
|
79
|
+
@keyframes slide2 {
|
|
80
|
+
0% {opacity: 0;}
|
|
81
|
+
25% {opacity: 0; transform: scale(1);}
|
|
82
|
+
35% {opacity: 1;}
|
|
83
|
+
65% {transform: scale(1.1);}
|
|
84
|
+
75% {opacity: 1;}
|
|
85
|
+
85% {opacity: 0;}
|
|
86
|
+
100% {opacity: 0;}
|
|
87
|
+
}
|
|
88
|
+
/*3枚目*/
|
|
89
|
+
@keyframes slide3 {
|
|
90
|
+
0% {opacity: 0;}
|
|
91
|
+
50% {opacity: 0; transform: scale(1);}
|
|
92
|
+
60% {opacity: 1;}
|
|
93
|
+
80% {opacity: 1;}
|
|
94
|
+
90% {opacity: 0; transform: scale(1.1);}
|
|
95
|
+
100% {opacity: 0;}
|
|
45
96
|
}
|