質問編集履歴
3
質問文を修正しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,10 +1,22 @@
|
|
|
1
|
+
### 実現したいこと
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
1
|
-
scssでアニメーションが動かずコードのどこの部分が間違っているのかご指摘いただきたいです。
|
|
5
|
+
**scss**でアニメーションが動かずコードのどこの部分が間違っているのかご指摘いただきたいです。
|
|
2
|
-
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
3
|
-
|
|
15
|
+
ブラウザで確認すると全く動きません。アニメーション部分以外の**css**は反映されています。
|
|
4
|
-
|
|
16
|
+
|
|
5
|
-
使用しているエディタをvscodeで、scssをeasysassでコンパイルしています。
|
|
17
|
+
使用しているエディタを**vscode**で、**scss**を**easysass**でコンパイルしています。
|
|
6
|
-
|
|
18
|
+
|
|
7
|
-
htmlにはstyle.min.cssを読み込ませています。
|
|
19
|
+
**html**にはs**tyle.min.css**を読み込ませています。
|
|
8
20
|
|
|
9
21
|
|
|
10
22
|
|
|
@@ -20,9 +32,7 @@
|
|
|
20
32
|
|
|
21
33
|
```html
|
|
22
34
|
|
|
23
|
-
コード
|
|
24
|
-
|
|
25
|
-
|
|
35
|
+
<!DOCTYPE html>
|
|
26
36
|
|
|
27
37
|
<html lang="ja">
|
|
28
38
|
|
|
@@ -66,11 +76,11 @@
|
|
|
66
76
|
|
|
67
77
|
|
|
68
78
|
|
|
79
|
+
```
|
|
80
|
+
|
|
69
81
|
```scss
|
|
70
82
|
|
|
71
|
-
コード
|
|
72
|
-
|
|
73
|
-
|
|
83
|
+
@charset "utf-8";
|
|
74
84
|
|
|
75
85
|
|
|
76
86
|
|
|
@@ -92,8 +102,6 @@
|
|
|
92
102
|
|
|
93
103
|
}
|
|
94
104
|
|
|
95
|
-
100% {opacity: 1}
|
|
96
|
-
|
|
97
105
|
}
|
|
98
106
|
|
|
99
107
|
|
|
@@ -156,11 +164,23 @@
|
|
|
156
164
|
|
|
157
165
|
|
|
158
166
|
|
|
167
|
+
|
|
168
|
+
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
|
|
172
|
+
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
159
181
|
```css
|
|
160
182
|
|
|
161
|
-
コード
|
|
162
|
-
|
|
163
|
-
|
|
183
|
+
ul {
|
|
164
184
|
|
|
165
185
|
list-style: none;
|
|
166
186
|
|
|
@@ -276,23 +296,41 @@
|
|
|
276
296
|
|
|
277
297
|
content: "3";
|
|
278
298
|
|
|
299
|
+
font-size: 20px;**ボールドテキスト**
|
|
300
|
+
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
|
|
304
|
+
|
|
305
|
+
.boxes3 li:nth-of-type(4) {
|
|
306
|
+
|
|
307
|
+
animation-delay: 0.8s;
|
|
308
|
+
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
|
|
312
|
+
|
|
313
|
+
.boxes3 li:nth-of-type(4)::before {
|
|
314
|
+
|
|
315
|
+
content: "4";
|
|
316
|
+
|
|
279
317
|
font-size: 20px;
|
|
280
318
|
|
|
281
319
|
}
|
|
282
320
|
|
|
283
321
|
|
|
284
322
|
|
|
285
|
-
.boxes3 li:nth-of-type(
|
|
323
|
+
.boxes3 li:nth-of-type(5) {
|
|
286
|
-
|
|
324
|
+
|
|
287
|
-
animation-delay:
|
|
325
|
+
animation-delay: 1s;
|
|
288
|
-
|
|
326
|
+
|
|
289
|
-
}
|
|
327
|
+
}
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
328
|
+
|
|
329
|
+
|
|
330
|
+
|
|
293
|
-
.boxes3 li:nth-of-type(
|
|
331
|
+
.boxes3 li:nth-of-type(5)::before {
|
|
294
|
-
|
|
332
|
+
|
|
295
|
-
content: "
|
|
333
|
+
content: "5";
|
|
296
334
|
|
|
297
335
|
font-size: 20px;
|
|
298
336
|
|
|
@@ -300,28 +338,4 @@
|
|
|
300
338
|
|
|
301
339
|
|
|
302
340
|
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
animation-delay: 1s;
|
|
306
|
-
|
|
307
|
-
}
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
.boxes3 li:nth-of-type(5)::before {
|
|
312
|
-
|
|
313
|
-
content: "5";
|
|
314
|
-
|
|
315
|
-
font-size: 20px;
|
|
316
|
-
|
|
317
|
-
}
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
```style.min.css
|
|
324
|
-
|
|
325
|
-
コード
|
|
326
|
-
|
|
327
|
-
```ul{list-style:none}@keyframes fadeIn{0%{transform:translateY(30px);opacity:0}100%{opacity:1}}.boxes3{margin:300px 0;display:flex}.boxes3 li{width:100px;height:100px;background-color:#eee;border:1px solid #aaa;display:flex;align-items:center;justify-content:center;animation:fadeIn 2% backwards}.boxes3 li:not(:first-of-type){margin-left:10px}.boxes3 li:nth-of-type(1){animation-delay:0.2s}.boxes3 li:nth-of-type(1)::before{content:"1";font-size:20px}.boxes3 li:nth-of-type(2){animation-delay:0.4s}.boxes3 li:nth-of-type(2)::before{content:"2";font-size:20px}.boxes3 li:nth-of-type(3){animation-delay:0.6s}.boxes3 li:nth-of-type(3)::before{content:"3";font-size:20px}.boxes3 li:nth-of-type(4){animation-delay:0.8s}.boxes3 li:nth-of-type(4)::before{content:"4";font-size:20px}.boxes3 li:nth-of-type(5){animation-delay:1s}.boxes3 li:nth-of-type(5)::before{content:"5";font-size:20px}
|
|
341
|
+
```
|
2
質問文の修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
scssでアニメーションが動かずコードのどこの部分が間違っているのかご指摘いただきたいです。
|
|
2
2
|
|
|
3
|
-
youtubeでscssでのアニメーション
|
|
3
|
+
youtubeでscssでのアニメーションの動かし方を見ながら同じ様にコードを書いていたのですが、ブラウザで確認すると全く動きません。アニメーション部分以外のcssは反映されています。
|
|
4
4
|
|
|
5
5
|
使用しているエディタをvscodeで、scssをeasysassでコンパイルしています。
|
|
6
6
|
|
1
質問文の修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
scssでアニメーションが動かずコードのどこの部分が間違っているのかご指摘いただきたいです。
|
|
2
2
|
|
|
3
|
-
youtubeでscssでのアニメーションを動かし方を見ながら同じ様にコードを書いていたのですが、ブラウザで確認すると全く
|
|
3
|
+
youtubeでscssでのアニメーションを動かし方を見ながら同じ様にコードを書いていたのですが、ブラウザで確認すると全く動きません。アニメーション部分以外のcssは反映されています。
|
|
4
|
-
|
|
5
|
-
動きません。アニメーション部分以外のcssは反映されています。
|
|
6
4
|
|
|
7
5
|
使用しているエディタをvscodeで、scssをeasysassでコンパイルしています。
|
|
8
6
|
|