IEとEdghのみSCSSのkeyframeアニメーションが動かない。

前提・実現したいこと

ポートフォリオサイトを作成中なのですが、IEとEdghのみロード中のcssアニメーションが動かないため解消したいと考えています。

発生している問題・エラーメッセージ

IEとEdghのみ挙動がおかしい。

該当のソースコード

scss
1@import 'https://fonts.googleapis.com/css?family=Rubik+Mono+One';
2
3.words-00 {
4  position:relative;
5  color: white;
6  font-size: 80px;
7  text-align: center;
8  height:auto;
9  top:10%;
10}
11.words-00 span {
12  font-size: 120px;
13  display: inline-block;
14  animation: move 3.5s ease-in-out infinite;
15}
16.words-00 span:nth-child(2) {
17  animation-delay: 0.9s;
18}
19.words-00 span:nth-child(3) {
20  animation-delay: 0.3s;
21}
22.words-00 span:nth-child(4) {
23  animation-delay: 1.1s;
24}
25
26.words-01 {
27  position:relative;
28  color: white;
29  font-size: 100px;
30  text-align: center;
31  height:auto;
32  top:40%;
33}
34.words-01 span {
35  font-size: 120px;
36  display: inline-block;
37  animation: move 2s ease-in-out infinite;
38}
39.words-01 span:nth-child(2) {
40  animation-delay: 0.4s;
41}
42.words-01 span:nth-child(3) {
43  animation-delay: 0.8s;
44}
45.words-01 span:nth-child(4) {
46  animation-delay: 1.3s;
47}
48
49.words-02 {
50  position:relative;
51  color: white;
52  font-size: 180px;
53  text-align: right;
54  top:30%;
55  height:auto;
56  right:20px;
57}
58
59.words-02 span {
60  font-size: 120px;
61  display: inline-block;
62  animation: move 2.5s ease-in-out infinite;
63}
64.words-02 span:nth-child(2) {
65  animation-delay: 0.5s;
66}
67.words-02 span:nth-child(3) {
68  animation-delay: 0.6s;
69}
70.words-02 span:nth-child(4) {
71  animation-delay: 1.3s;
72}
73
74.words-03 {
75  position:relative;
76  color: white;
77  font-size: 180px;
78  text-align: left;
79  top:20%;
80  height:auto;
81  left:20px;
82}
83
84.words-03 span {
85  font-size: 160px;
86  display: inline-block;
87  animation: move 3s ease-in-out infinite;
88}
89.words-03 span:nth-child(2) {
90  animation-delay: 1.1s;
91}
92.words-03 span:nth-child(3) {
93  animation-delay: 0.8s;
94}
95.words-03 span:nth-child(4) {
96  animation-delay: 0.3s;
97}
98
99@keyframes move {
100  0% {
101    transform: translate(-25%, 0);
102    max-height: 0;
103  }
104  50% {
105    text-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
106    max-height: 100;
107  }
108  100% {
109    transform: translate(33%, 0);
110    max-height: 100;
111  }
112}

html
1<div id="loader">
2        <div class="words-00">
3            <span>○</span>
4            <span>○</span>
5            <span>○</span>
6        </div>
7        <div class="words-01">
8            <span>○</span>
9            <span>○</span>
10            <span>○</span>
11        </div>
12        <div class="words-02">
13            <span>○</span>
14            <span>○</span>
15            <span>○</span>
16        </div>
17        <div class="words-03">
18            <span>○</span>
19            <span>○</span>
20            <span>○</span>
21        </div>
22    </div>

css
1#loader {
2    position:fixed;
3    background-size:cover;
4    background-color: #fff;
5    z-index:1;
6    width:100vw;
7    height:100vh;
8}
9

試したこと

ググって@keyframesで指定する高さを変更してみたり、cssの書き方が厳密でならなければならないとのことでcssの記述を見返してみたりしましたがどのように修正すればよいかわかりませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

sasa_

2020/06/04 15:19

Edgeで確認させていただきましたが、少なくともhtmlとCSS（SCSS）にご質問に記載のコード以外がなければ動きます。（確認：mac/Edge）他の要素が絡まず、SCSSがご質問に記載されたとおり変換できていれば問題ないとおもうのですが。全体がもっと長いコードでしたらまず記載部分だけでテストしてみてはいかがでしょう。確認した際にOKだったブラウザなどもわかると違いを検証できますので、ご記載いただけるとよいと思います。

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

回答1件

こちらに書いてあるように、

動きを見る限り、EdgeとIE11では@keyframesの中のheightの最終的な設定値がautoだと、他のフレームでheightの数値を指定していようが全てが無効な値として扱われてしまう

ようです。
SCSSを、このように変えてみてはどうでしょうか。

SCSS
1@import 'https://fonts.googleapis.com/css?family=Rubik+Mono+One';
2
3.words-00 {
4  position:relative;
5  color: white;
6  font-size: 80px;
7  text-align: center;
8  height:auto;
9  top:10%;
10}
11.words-00 span {
12  font-size: 120px;
13  display: inline-block;
14  animation: move 3.5s ease-in-out infinite;
15}
16.words-00 span:nth-child(2) {
17  animation-delay: 0.9s;
18}
19.words-00 span:nth-child(3) {
20  animation-delay: 0.3s;
21}
22.words-00 span:nth-child(4) {
23  animation-delay: 1.1s;
24}
25
26.words-01 {
27  position:relative;
28  color: white;
29  font-size: 100px;
30  text-align: center;
31  height:auto;
32  top:40%;
33}
34.words-01 span {
35  font-size: 120px;
36  display: inline-block;
37  animation: move 2s ease-in-out infinite;
38}
39.words-01 span:nth-child(2) {
40  animation-delay: 0.4s;
41}
42.words-01 span:nth-child(3) {
43  animation-delay: 0.8s;
44}
45.words-01 span:nth-child(4) {
46  animation-delay: 1.3s;
47}
48
49.words-02 {
50  position:relative;
51  color: white;
52  font-size: 180px;
53  text-align: right;
54  top:30%;
55  height:auto;
56  right:20px;
57}
58
59.words-02 span {
60  font-size: 120px;
61  display: inline-block;
62  animation: move 2.5s ease-in-out infinite;
63}
64.words-02 span:nth-child(2) {
65  animation-delay: 0.5s;
66}
67.words-02 span:nth-child(3) {
68  animation-delay: 0.6s;
69}
70.words-02 span:nth-child(4) {
71  animation-delay: 1.3s;
72}
73
74.words-03 {
75  position:relative;
76  color: white;
77  font-size: 180px;
78  text-align: left;
79  top:20%;
80  height:auto;
81  left:20px;
82}
83
84.words-03 span {
85  font-size: 160px;
86  display: inline-block;
87  animation: move 3s ease-in-out infinite;
88}
89.words-03 span:nth-child(2) {
90  animation-delay: 1.1s;
91}
92.words-03 span:nth-child(3) {
93  animation-delay: 0.8s;
94}
95.words-03 span:nth-child(4) {
96  animation-delay: 0.3s;
97}
98
99@keyframes move {
100  0% {
101    transform: translate(-25%, 0);
102    max-height: 0;
103  }
104  50% {
105    text-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
106    max-height: 100;
107  }
108  100% {
109    transform: translate(33%, 0);
110    max-height: 100;
111    height: inherit;/*追加*/
112  }
113}