cssのRBRACEエラー

メディアクエリで囲まない時には何も起こらないのに、囲むとエラーが起きます。
なぜこうなるのかわかりません。どなたか教えてください。
エラー内容はコード内コメントに書いてあります。よろしくお願いします。

CSS
1
2@-webkit-keyframes rotate {
3  0% {
4    -moz-transform: rotateY(0deg) rotateZ(0deg);
5    -ms-transform: rotateY(0deg) rotateZ(0deg);
6    -webkit-transform: rotateY(0deg) rotateZ(0deg);
7    transform: rotateY(0deg) rotateZ(0deg);
8  }
9  100% {
10    -moz-transform: rotateY(360deg) rotateZ(360deg);
11    -ms-transform: rotateY(360deg) rotateZ(360deg);
12    -webkit-transform: rotateY(360deg) rotateZ(360deg);
13    transform: rotateY(360deg) rotateZ(360deg);
14  }
15}
16@keyframes rotate {
17  0% {
18    -moz-transform: rotateY(0deg) rotateZ(0deg);
19    -ms-transform: rotateY(0deg) rotateZ(0deg);
20    -webkit-transform: rotateY(0deg) rotateZ(0deg);
21    transform: rotateY(0deg) rotateZ(0deg);
22  }
23  100% {
24    -moz-transform: rotateY(360deg) rotateZ(360deg);
25    -ms-transform: rotateY(360deg) rotateZ(360deg);
26    -webkit-transform: rotateY(360deg) rotateZ(360deg);
27    transform: rotateY(360deg) rotateZ(360deg);
28  }
29}
30
31
32
33
34
35
36@media(max-width: 767px){
37
38
39//中略
40
41//次の行１列目にexpected RBRACE〜と表示される
42@-webkit-keyframes rotate {
43  0% {
44    -moz-transform: rotateY(0deg) rotateZ(0deg);
45    -ms-transform: rotateY(0deg) rotateZ(0deg);
46    -webkit-transform: rotateY(0deg) rotateZ(0deg);
47    transform: rotateY(0deg) rotateZ(0deg);
48  }
49  100% {
50    -moz-transform: rotateY(360deg) rotateZ(360deg);
51    -ms-transform: rotateY(360deg) rotateZ(360deg);
52    -webkit-transform: rotateY(360deg) rotateZ(360deg);
53    transform: rotateY(360deg) rotateZ(360deg);
54  }
55}
56@keyframes rotate {
57  0% {
58    -moz-transform: rotateY(0deg) rotateZ(0deg);
59    -ms-transform: rotateY(0deg) rotateZ(0deg);
60    -webkit-transform: rotateY(0deg) rotateZ(0deg);
61    transform: rotateY(0deg) rotateZ(0deg);
62  }
63  100% {
64    -moz-transform: rotateY(360deg) rotateZ(360deg);
65    -ms-transform: rotateY(360deg) rotateZ(360deg);
66    -webkit-transform: rotateY(360deg) rotateZ(360deg);
67    transform: rotateY(360deg) rotateZ(360deg);
68  }
69}
70
71}//ここにはunexpected token"}"と出て来ます。

s8_chu

2019/10/19 13:27

通常 CSS はエラーを発生させませんが、どの場面で生じたエラーでしょうか？

zynu

2019/10/19 13:34

すみません、どういう意味でしょうか。

s8_chu

2019/10/19 13:42 編集

CSS は実行時にエラーが発生しませんので、何らかのエディタを使用して CSS を記述している際に当該エラーが発生したものと考えられます。その「何らかのエディタ」の情報がわかれば、より的確な回答がされやすくなるため、そのエラーがどのような場面で生じたものか、より具体的に質問文へ追記していただけませんか？

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

回答3件

自己解決

実行してみたら普通に表示されました。回答・修正依頼ありがとうございます。

投稿2019/10/21 02:37

zynu

総合スコア29

CSSのコメントは /* */ のみなので、例示している物に使っているということは本文にも使ってしまっているのでは。CSSは構文がおかしくなった部分から後の記述部分が影響を受けるので、@mediaをCSSの最初に持って来たら同じ場所にはエラーが出ない（別の場所に出るかもしれませんが）かもしれません。

投稿2019/10/20 06:03