scssでアニメーションが動かない

実現したいこと

scssでアニメーションが動かずコードのどこの部分が間違っているのかご指摘いただきたいです。

ブラウザで確認すると全く動きません。アニメーション部分以外のcssは反映されています。
使用しているエディタをvscodeで、scssをeasysassでコンパイルしています。
htmlにはstyle.min.cssを読み込ませています。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="style.min.css">
7    <title>Document</title>
8</head>
9<body>
10<ul class="boxes3">
11    <li></li>
12    <li></li>
13    <li></li>
14    <li></li>
15    <li></li>
16</ul>
17</body>
18</html>
19
20
21
22

scss
1@charset "utf-8";
2
3ul {
4    list-style: none;
5}
6
7  @keyframes fadeIn {
8    0%{
9    transform: translateY(30px);
10    opacity: 0;
11    }
12}
13
14.boxes3 {
15    margin: 300px 0;
16    display: flex;
17    li {
18        width: 100px;
19        height: 100px;
20        background-color: #eee;
21        border: 1px solid #aaa;
22        display: flex;
23        align-items: center;
24        justify-content: center;
25        animation: fadeIn 2% backwards;
26        &:not(:first-of-type) {
27            margin-left: 10px;
28        }
29        @for $i from 1 through 5 {
30            &:nth-of-type(#{$i}) {
31                animation-delay: .2s * $i;
32                &::before {
33                    content: '#{$i}';
34                    font-size: 20px;
35                }
36            }
37        }
38    }
39}
40
41
42
43

css
1ul {
2  list-style: none;
3}
4
5@keyframes fadeIn {
6  0% {
7    transform: translateY(30px);
8    opacity: 0;
9  }
10  100% {
11    opacity: 1;
12  }
13}
14
15.boxes3 {
16  margin: 300px 0;
17  display: flex;
18}
19
20.boxes3 li {
21  width: 100px;
22  height: 100px;
23  background-color: #eee;
24  border: 1px solid #aaa;
25  display: flex;
26  align-items: center;
27  justify-content: center;
28  animation: fadeIn 2% backwards;
29}
30
31.boxes3 li:not(:first-of-type) {
32  margin-left: 10px;
33}
34
35.boxes3 li:nth-of-type(1) {
36  animation-delay: 0.2s;
37}
38
39.boxes3 li:nth-of-type(1)::before {
40  content: "1";
41  font-size: 20px;
42}
43
44.boxes3 li:nth-of-type(2) {
45  animation-delay: 0.4s;
46}
47
48.boxes3 li:nth-of-type(2)::before {
49  content: "2";
50  font-size: 20px;
51}
52
53.boxes3 li:nth-of-type(3) {
54  animation-delay: 0.6s;
55}
56
57.boxes3 li:nth-of-type(3)::before {
58  content: "3";
59  font-size: 20px;**ボールドテキスト**
60}
61
62.boxes3 li:nth-of-type(4) {
63  animation-delay: 0.8s;
64}
65
66.boxes3 li:nth-of-type(4)::before {
67  content: "4";
68  font-size: 20px;
69}
70
71.boxes3 li:nth-of-type(5) {
72  animation-delay: 1s;
73}
74
75.boxes3 li:nth-of-type(5)::before {
76  content: "5";
77  font-size: 20px;
78}
79

Lhankor_Mhy

2020/08/28 06:13

3-7. markdownを利用しましょう https://teratail.com/help/question-tips#questionTips3-7 https://teratail-v2.storage.googleapis.com/assets/img/tour/01.webm

manachos

2020/08/28 07:08

ご指摘ありがとうございます。これから質問する際には記述の仕方を気をつけたいと思います。

行動規範の内容に同意します

回答1件

ベストアンサー

ええと、単純に2%ってのが2sの間違いなのでは。

Diff
1-animation: fadeIn 2% backwards;
2+animation: fadeIn 2s backwards;

投稿2020/08/28 07:03

Daregada

総合スコア11990

manachos

2020/08/28 08:58

回答ありがとうございます。間違えて％にしていました。教えていただいた通りに修正しましたら動くよになりました！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

scssでアニメーションが動かない

実現したいこと

関連した質問