CSSでアニメーションを作ろうとしたのですが、画像が表示されません。

HTMLで雨だれを８個配置し、 cssでランダムっぽく出るようにしてみたのですが、
いざ、ブラウザに入れてみると、雨だれが表示されません。

↑これです
何が足りなかったのでしょうか。

html
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>Untitled Document</title>
6<style type="text/css">
7@import url("Cola.css");
8</style>
9<link href="Cola.css" rel="stylesheet" type="text/css">
10</head>
11<body>
12	<section id="ame">
13	<div class="ame1"></div>
14	<div class="ame2"></div>
15	<div class="ame3"></div>
16	<div class="ame4"></div>
17	<div class="ame5"></div>
18	<div class="ame6"></div>
19	<div class="ame7"></div>
20	<div class="ame8"></div>
21	</section>
22</body>
23</html>
24

css
1@charset "UTF-8";
2/* CSS Document */
3section.inner div{
4	opacity: 0;
5	-webkit-transform-origin: 0px 0px;
6	-ms-transform-origin: 0px 0px;
7	transform-origin: 0px 0px;
8	-webkit-animation-name: Drop;
9	animation-name: Drop;
10	-webkit-animetion-interation-count: infinite;
11	animation-iteration-count: infinite;
12	-webkit-animation-timing-function: linear;
13	animation-timing-function: linear;
14	-webkit-animation-fill-mode: forwards;
15	animation-fill-mode: forwards;
16}
17
18#ame.inner div{
19	position: absolute;
20	display: block;
21	width: 10px;
22	height: 15px;
23	background: url(雨.png)
24		no-repeat;
25}
26
27#ame.inner div.ame1,
28inner div.ame2,
29inner div.ame3,
30inner div.ame4,
31inner div.ame5,
32inner div.ame6,
33inner div.ame7,
34inner div.ame8{
35	background-size: 5px 6px!important;
36}
37
38.ame1{
39	left:20px;
40	-webkit-animation-duration:2.5s;
41	animation-duration: 2.5s;
42}
43.ame2{
44	left:40px;
45	-webkit-animation-duration:2.7s;
46	animation-duration: 2.7s;
47	-webkit-animation-delay: 0.2s;
48	animation-delay: 0.2s;
49}
50.ame3{
51	left:60px;
52	-webkit-animation-duration:2.9s;
53	animation-duration: 2.9s;
54	-webkit-animation-delay: 0.4s;
55	animation-delay: 0.4s;
56}
57.ame4{
58	left:80px;
59	-webkit-animation-duration:2.4s;
60	animation-duration: 2.4s;
61	-webkit-animation-delay: 0s;
62	animation-delay: 0s;
63}
64.ame5{
65	left:100px;
66	-webkit-animation-duration:2.4s;
67	animation-duration: 2.4s;
68	-webkit-animation-delay: 1s;
69	animation-delay: 1s;
70}
71.ame6{
72	left:150px;
73	-webkit-animation-duration:2.2s;
74	animation-duration: 2.2s;
75	-webkit-animation-delay: 1.2s;
76	animation-delay: 1.2s;
77}
78.ame7{
79	left:170px;
80	-webkit-animation-duration:2.7s;
81	animation-duration: 2.7s;
82	-webkit-animation-delay: 1.2s;
83	animation-delay: 1.2s;
84}
85.ame8{
86	left:200px;
87	-webkit-animation-duration:3s;
88	animation-duration: 3s;
89	-webkit-animation-delay: 1.4s;
90	animation-delay: 1.4s;
91}
92
93@-webkit-keyframes Drop{
94	0%{
95	-webkit-transform:translateY(0px);
96	transform: translateY(0px);
97	opacity: 0;
98	}
99	50%{
100	-webkit-transform:translateY(50px);
101	transform: translateY(50px);
102	opacity: 1;
103	}
104	100%{
105	-webkit-transform:translateY(100px);
106	transform: translateY(100px);
107	opacity: 0.3;
108	}
109}
110
111@keyframes Drop{
112	0%{
113	-webkit-transform:translateY(0px);
114	transform: translateY(0px);
115	opacity:0;
116	}
117	50%{
118	-webkit-transform:translateY(50px);
119	transform: translateY(50px);
120	opacity:1;
121	}
122	100%{
123	-webkit-transform:translateY(100px);
124	transform: translateY(100px);
125	opacity:0.3;
126	}
127}

m.ts10806

2019/05/27 01:10

今、どういう動作、表示になっているのでしょうか。ファイル名を半角にしても同じですか？

KawamotoFumiya

2019/05/27 01:48

Dreamweaberで作って、htmlにstyleシートをつけました。クロームで開いても真っ白な画面が出て特に何もありません。ファイル名を変えてみます。

m.ts10806

2019/05/27 01:55

@importが邪魔してたり？念のため現在の画面でブラウザ「ソースを表示」でhtml確認しておいてください。あとデベロッパツールのコンソールでエラー確認。

m.ts10806

2019/05/27 02:02

あと「何も表示されない」だと「表示させてないから何も出ていない」のか「何かしらエラー等あって何も出ていない」のか分かりませんので、現在のHTMLだけですと文字列も何も画面に出していないのでどちらか分かりにくくなります。例えばh1タグでタイトルを出しておいたりして問題の切り分けができるようにしておきましょう。（やりたい動作ができたら後で消せば良いです。デバッグのために入れるので）

回答2件

ベストアンサー

HTML
1<!--                         ↓ これが無い -->
2    <section id="ame" class="inner">
3    <div class="ame1"></div>
4    <div class="ame2"></div>
5    <div class="ame3"></div>
6    <div class="ame4"></div>
7    <div class="ame5"></div>
8    <div class="ame6"></div>
9    <div class="ame7"></div>
10    <div class="ame8"></div>
11    </section>

CSS
1/* 「.inner」でなく「inner」になっていた */
2#ame.inner div.ame1,
3.inner div.ame2,/* ← */
4.inner div.ame3,/* ← */
5.inner div.ame4,/* ← */
6.inner div.ame5,/* ← */
7.inner div.ame6,/* ← */
8.inner div.ame7,/* ← */
9.inner div.ame8{/* ← */
10    background-size: 5px 6px!important;
11}
12```**動くサンプル：**[https://jsfiddle.net/2y9uv7qa/](https://jsfiddle.net/2y9uv7qa/)