Sass ( indented syntax )を用いた際のCSS animationの書き方について

sassのindented syntaxがどういうものなのか確認している時に、アニメーションをつけようとして躓いてしまいました。
インデントを用いるsassを使用した際のanimation(keyframes)をGoogleで英語のサイトを参考にしながら以下の様に書いてみたのですが、以下のエラーが出てしまいました。（コンパイルにはKoalaを使用）
問題点をご指摘頂けますと幸いです。
どうかよろしくお願いします。

以下コードとエラー文

html
1<body>
2    <div>
3        <img src="./img/画像１.png" alt="">
4        <img src="./img/画像２.png" alt="">
5    </div>
6
7</body>

css
1div
2    position: relative
3    img
4        position: absolute
5        top: 0
6        left: 0
7    img:first-child
8        opacity: 1
9        z-index: 1
10    img:nth-child(2)
11        opacity: 0
12        z-index: 2
13        animation: test 1s linear
14
15@keyflames test
16    0%
17        opacity: 0
18    45%
19        opacity: 0
20    80%
21        opacity: 1
22    100%
23        opacity: 1
24コード

Error: Invalid CSS after "": expected selector, was "0%"

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

回答1件

ベストアンサー

@keyflamesは@keyframesだと思います。

Sass
1div
2    position: relative
3    img
4        position: absolute
5        top: 0
6        left: 0
7    img:first-child
8        opacity: 1
9        z-index: 1
10    img:nth-child(2)
11        opacity: 0
12        z-index: 2
13        animation: test 1s linear
14
15@keyframes test
16    0%
17        opacity: 0
18    45%
19        opacity: 0
20    80%
21        opacity: 1
22    100%
23        opacity: 1