cssの記述位置によってcssアニメーションが動かなくなってしまっています。

cssファイルのアニメーション02部分をアニメーション01の上に記述するとアニメーション02部分が動かなくなってしまうのですがどの部分の記述がぶつかっているかお分かりになる方いらっしゃいますでしょうか。

初心者のため、コードが汚くご迷惑おかけします。お知恵をお借りできますと幸いです。
どうぞよろしくお願いいたします。

html
1<!DOCTYPE html>
2
3<head>
4	<meta charset="UTF-8">
5	<link href="style.css" rel="stylesheet">
6</head>
7<body>
8	<div class="wrapper">
9
10		
11
12
13		
14
15		<div class="crowd">
16			<div class="SImg"></div>
17		</div>
18		
19    
20
21	<div class="background">
22				<ul>
23					<li>
24						<a href="#"><img alt="wall" height="438" src="images/wall.png" width="548"></a>
25					</li>
26					<li>
27						<a href="#"><img alt="door" height="120" src="images/door.png" width="104"></a>
28					</li>
29					<li>
30						<a href="#"><img alt="window" class="window" height="75" src="images/window.png" width="75"></a>
31					</li>
32					<li>
33						<a href="#"><img alt="roof" height="340" src="images/roof.png" width="613"></a>
34					</li>
35					<li>
36						<a href="#"><img alt="chimny" height="229" src="images/chimny.png" width="182"></a>
37					</li>
38				</ul>
39			</div
40
41
42	</div>
43	
44	
45</body>
46</html>
47

css
1
2
3
4
5/*///////////////////アニメーション01///////////////////*/
6
7	.background ul li:nth-child(n+2) {
8		animation: horizontal 1s ease-in-out infinite alternate;
9		list-style: none;
10	}
11	.background ul li a img {
12		animation: vertical 1s ease-in-out infinite alternate;
13	}
14
15	.background ul li:nth-child(2) {
16		animation-duration: 1.3s;
17		position: absolute;
18		top: 500px;
19		left: 250px;
20	}
21	.background ul li:nth-child(3) {
22		position: absolute;
23		top: 330px;
24		left: 250px;
25	}
26	.background ul li a .window {
27		width: 150%;
28		height: 150%;
29	}
30	.background ul li:nth-child(4) {
31		animation-duration: 1.7s;
32		position: absolute;
33		top: 0px;
34		left: 0px;
35	}
36	.background ul li:nth-child(5) {
37		animation-duration: 1.9s;
38		position: absolute;
39		top: -50px;
40		left: 400px;
41	}
42	
43	
44@keyframes horizontal {
45		0% {
46			transform: translateX( -10px);
47		}
48		100% {
49			transform: translateX( 0px);
50		}
51	}
52	@keyframes vertical {
53		0% {
54			transform: translateY(-50px);
55		}
56		100% {
57			transform: translateY( 0px);	
58		}
59	}
60
61
62
63	/*///////////////////アニメーション02///////////////////*/
64
65
66.crowd .SImg {
67	background-image: url(images/crowd02.png);
68	width: 1000px;
69	height: 350px;
70	background-position: 50% 50%;
71	-webkit-backface-visibility: hidden;
72	-webkit-animation: move 20s linear infinite 0s;
73	-moz-animation: move 20s linear infinite 0s;
74	-o-animation: move 20s linear infinite 0s;
75	-ms-animation: move 20s linear infinite 0s;
76	animation: move 20s linear infinite 0s;
77}
78
79
80@keyframes move {
81	0% {
82		opacity:0;
83		transform: scale(0);
84	}
85	10% {
86		opacity:1;
87	transform: scale(1.05);
88	}
89
90		100% {
91		opacity:1;
92		transform:scale(1000);
93	}
94}